Positioning of Elements

webdesign 7

Block and Inline Elements · Replaced and Non-Replaced Elements · Display · Position · Float · Links

Block and Inline Elements

  • Block elements create a box with line breaks above and below it. Typical block elements are @ and @<p>.
  • Inline elements create a box within the text flow. Typical inline elements are <span> and <a>.

Replaced and Non-Replaced Elements

  • Non-replaced elements are elements whose contents is part of the element itself, e.g. <p> contains the text which is displayed as the content of the element.
  • Replaced elements are a placeholder for something different, e.g. <img> references an image which is displayed for the element.

Display

You can change the display style of elements and convert inline into block elements and vice versa.

<h1 style="display: inline;">H1 is a block element which is now displayed inline.</h1>

Full syntax of the display property:

display: none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row | table-cell | table-row-group | table-header-group | table-footer-group | table-column | table-column-group | table-caption | inherit;

Example: Newspaper style
<div>
	<div style="display: inline-block; width: 33%; vertical-align: top;">
		...some text...
	</div>
	<div style="display: inline-block; width: 33%; vertical-align: top;">
		...some more text...
	</div>
	<div style="display: inline-block; width: 33%; vertical-align: top;">
		...even more text...
	</div>
</div>

Position

position: static | relative | absolute | fixed | inherit;
top, left, right, bottom: auto | px | % | pt;
width (min-width, max-width): auto | px | % | pt;
height (min-height, max-height): auto | px | % | pt;

Example: Fixed paragraph
<p style="position: fixed;">Don't move!</p>

Float

float: left | right | none | inherit;
clear: left | right | both | none | inherit;

Example: Floating paragraph
...some text...
<p style="float: left;">Floating!</p>
...some more text...
<p style="clear: both;">And now for something completely different...</p>

Links:

Using CSS (German): http://http://de.selfhtml.org/css/index.htm
Positioning (German): http://http://de.selfhtml.org/css/eigenschaften/positionierung.htm