Using CSS to Position Elements

Floating Elements

Floating elements was introduced in HTML 2. Images in particular were allowed to be placed on the left, centred or on the right and other content, usually text flowed or "floated" around the image. Some browsers would accept floating with tables. CSS allows the designer to float any element. The attribute is float and it takes one of three values left, right, center. By default float is turned off. Float is not inherited.

Some more interesting work can be done with floating text. Some browsers would accept floating with tables. CSS allows the designer to float any element. The attribute is float and it takes one of three values left, right, center. By default float is turned off. Float is not inherited. The next paragraph has float set to right, along with a margin, some padding and a border. It is set to 15em wide as well.

Here is the floated paragraph, which becomes something like a "callout" in dtp language.

Here is a return to a normal paragraph, no margin, no padding, no border, no width restrictions and positioned by default. Floating elements was introduced in HTML 2. Images in particular were allowed to be placed on the left, centred or on the right and other content, usually text flowed or "floated" around the image. Some browsers would accept floating with tables. CSS allows the designer to float any element.

Some more interesting work can be done with floating text. Some browsers would accept floating with tables. CSS allows the designer to float any element. The attribute is float and it takes one of three values left, right, center. By default float is turned off. Float is not inherited. In this paragraph the em text has float set to center, along with a margin, some padding and a border. It is set to 10em wide as well.

Rules for Floated Elements

A floated element's containing block is the nearest block-level ancestor element.

The left outer edge of a floated element cannot go outside the left outer edge of its containing block.
The left outer edge of a floated element must be to the right of the right outer edge of any left-floating element that is above it in the document, unless the top of the lower element is below the bottom of the upper element. (This stops floated elements overwriting each other.)
The right outer edge of a left-floating element may not be to the right of the left outer edge of a right right-floating element to its right. (This stops floated elements overlapping each other.)
A floating element's top outer edge may not be higher than the inner top of its parent.
A floating element's top outer edge may not be higher than the top of any earlier floating or block-level element.
A floating element's top outer edge may not be higher than the top of any line box that contains an element box earlier in the document source. (These three rules limit any upward float.)
A left floating element that has a floating element to its left may not have its right outer edge beyond the right outer edge of its containing block. (If there is no room horizontally, the floating element is pushed to the next line.)
A floating element must be placed as high as possible.
A left floating element will float to the left as far as possible. Higher takes precedence over to the left.

Left can be replaced with right in these rules for the opposite side of the floated element.

Preventing / Terminating Float

This may also be familiar to you from HTML. The attribute to use is clear and it has four values: left, right, both, none. Clear is not inherited. Clear is only effective with block-level elements. The default is none, unless you prevent float from happening, it will. In CSS 2.1 clear adds just enough space (called clearance) to push the top border of the next element past the bottom edge of the floated element.

Positioning Elements

Types of Positioning

static: Default value
relative: Element box is offset by some distance. Element retains its default shape and size
absolute: Positioned in relation to its containing block. The original or default space occupied by the element is closed up. Positioned element generates a block-level box.
fixed: Similar to absolute, except the containing box is the viewport.

Elements can be positioned outside their containing blocks.

There are four attribute keywords that control the offset an element box has from its containing box: top, right, bottom, left. Each of these attributes can accept values either in length units or in percentages. Each can accept positive and negative values. This paragraph uses position: relative so that it stays inside the div margins. Notice that the 10% that is offset on the left now spills outside the div and off the screen.

There are four attribute keywords that control the offset an element box has from its containing box: top, right, bottom, left. This paragraph uses position: relative so that it stays inside the div margins. Notice that the 10% that is offset on the left now spills outside the div and off the screen.

The width attribute can be used to reduce the width of the element box to keep it inside the div element box.

In CSS 2 it is possible to set minimum and maximum sizes for a particular element box:min-width, min-height, max-width, max-height. All of these attributes accept either length units or percentages. As you would expect, these values cannot be negative. Unfortunately for most WWW users, these four attributes are not supported by Internet Explorer.

Overflow and Clipping

As should be clear by now adjusting the position and size of an element box can mean the element's contents spill outside the box. This can be controlled using either or both of overflow and clipping. Overflow determines what happens if content spills outside the element box, is it visible, is it hidden, are their scrollbars available? Of course the default is visible. And Overflow is not inherited.

As should be clear by now adjusting the position and size of an element box can mean the element's contents spill outside the box. Overflow determines what happens if content spills outside the element box, is it visible, is it hidden, are their scrollbars available? Of course this time overflow:scroll.

Clip is used to set the dimensions of the element box for content of an absolutely positioned element. The default value is auto. Clip is not inherited. At the moment the only shape allowed for the clip area is a rectangle. The co-ordinates used are offsets from the top left corner of the element. Only length values are permitted. Negative values will push the clip area outside the original element box. The attribute's syntax is: clip: rect(top, right, bottom, left)