CSS Layout Properties

2008 Oct 17

See: height width

Float

• left or right causes the element to float to that edge within the parent element, and allows other content (e.g. text) to flow around the element. The margins around an image never overlap those of other elements. All floated elements have a block box.
• none prevents an element from floating and other elements from flowing around it.

<p style="float: right; border: double; 
             width: 96; font-size: 80%; 
             margin: 3px; padding: 2px;
             background-color: #CCEEFF;">
This paragraph is floated to the right in a 
sky of blue.</p>
<p>This paragraph is a stodgy immobile non floated 
boring one, which has its roots too firmly fixed in 
the page. If this paragraph was before the floated 
one its normal break behavior would keep it completely 
before the floated paragraph, which is why these two 
paragraphs are in the order shown.</p>

img { border: 1px solid green; }
...
<p>This paragraph is the ocean within 
which the floated 
<img src=leftg.gif style="float: left;"> images swim. 
<img src=fishbowl.gif style="float: left;"> 
It is a big ocean so more than one fish 
<img src=rightg.gif style="float: right;"> 
is floating in it, since more than one image is 
floating in it. Are fishing boats needed in this ocean? 
The images have zero margin hence the text nearly touches 
the images.</p>

The containing block of a floated element is the nearest block-level ancestor element. Placement rules for floated elements follows, the above examples illustrate these rules. The primary purpose of these rules is to prevent overlap of floated blocks and to keep a floated element from floating up beyond its ancestor's edge.

1. The right (or left) outer edge of a floated element may not be to the right (or left) of the inner edge of its containing block.
2. The right (or left) outer edge of a floated element must be to the right (or left) of the left (or right) outer edge of a right (or left) floating element that occurs earlier in the markup, unless the top of the latter element is below the bottom of the former.
3. The right (left) outer edge of a left (right) floating element may not be to the right (left) of the left (right) outer edge of any right (left) floating element to its right (left).
4. A floating element's top may not be higher than the inner top of its parent. If a floating element is between two collapsing margins, then the floated element is places as if it had a block-level parent element between the two elements.
5. A floating element's top may not be higher than the top of any earlier floating or block-level element.
6. A floating element's top may not be higher than the top of any line box that contains a box generated by an element that comes earlier in the document source.
7. A left (right) floating element that has another floating element to its left (right) may not have its right (left) outer edge to the right (left) of its containing block's right (left) edge.
8. A floating element must be placed as high as possible.
9. A left (right) floating element must be put as far to the left (right) as possible. A higher position is preferred to one that is further to the right or left.

When a floating element is taller than its parent element it will float with respect to subsequent elements as in example below.

img { border: 1px solid green; }
...
<p>This 
<img src=v64.jpg style="float: right;"> 
paragraph is short, a mere lake, but does have a fish or 
two in it.</p>
<p>This is the second paragraph which also flows 
around the floater. The time to vote for your favorite 
fish is now.</p>

When a floating element is wider than its parent element it will overflow the parent in the opposite direction to its float direction. Notice the collapse of the margin on the right. IE does not do so well with this.

img { border: 1px solid green; }
...
<p style="width: 128px; 
          border: 5px groove; 
          margin: 32px;">
This paragraph 
<img src=w160.jpg 
    style="float: left; margin: 3px;"> 
is narrow, a mere stream, and has a 
wider image in it.</p>

Negative margins can displace floated elements to move outside of their parent element. This does not violate the rules. See example below.

img { border: 1px solid green; }
...
<p style="border: 1px dashed; margin: 18px;">This 
<img src=v64.jpg style="float: left; margin: -9px;"> 
paragraph has a positive margin and the image has a 
negative margin.</p>

In CSS2.1 the situation for inline elements (which up to then was unspecified) has been clarified by the following rules:

• An inline box that overflows with a float has its borders, bacjground, and content rendered on top of the float.
• A block bo that overlaps with a float has its borders and background rendered behind the float, whereas its content is rendered on top of the float.

img.lefty { float: left; 
             margin: 12px 12px 12px -12px; }
...
<p style="margin: 16">This paragraph has an embedded 
<img src=v64.jpg class=lefty> 
<b style="border: double; margin: -16px; 
   background: #00CC99">
long bold phrase is showing itself with color and border 
and negative margins with some overlap.</p>
<h3 style="margin-top: -16px; 
           background: #66CCFF;">
Heading3.</h3>

Clear

When you do not want your content to flow past a floated element, especially from one section to the next, then set the first element in each section to prevent foating elements from appearing next to it. This is done with the clear property. This property define the sides of an element on which no floating elements may appear. Modifying the above example for the heading3 the results are as follows.

img.lefty { float: left; 
             margin: 12px 12px 12px -12px; }
...
<p style="margin: 16">This paragraph has an embedded 
<img src=v64.jpg class=lefty> 
<b style="border: double; margin: -16px; 
   background: #00CC99">
long bold phrase is showing itself with color and border 
and negative margins some overlap.</p>
<h3 style="clear: left; margin-top: -16px; 
           background: #66CCFF;">
Heading3.</h3>

Position

Shape and size are preserved. Meaning of position values:

• static : This is the normal positioning. Block-level elements have a box that follows the document flow for the current language, and inline-boxes have line boxes that flow with the parent element.
• relative : The element's box is offset by a specified distance. Shape and size are preserved.
• absolute : The element's box position is specified by an amount with respect to its containing block - i.e. normal flow does not take place. See clip property.
• fixed : The element's box behaves as though it is absolute position, with the containing block acting as a viewport (bug: same as absolute in FF).

A float's containing block is the nearest block-level ancestor element. The situation for positioning is more complex.

• The containing block of the root element is determined by the client agent. In HTML this is the html element but some browsers use body. In most browsers, the initial containing block is the viewport rectangle.
• For a non root element whose position is relative or static, the containing block box is the content edge of the nearest block-level, table cell, or inline-block ancestor box.
• For a non root element whose position is absolute, the containing block box is that of the nearest ancestor with a position value other than static.
• If the ancestor is block-level, the containing block is the padding edge or border of the ancestor.
• If the ancestor is inline-level, the containing block is the content edge of the ancestor.
• If there are no ancestors the containing block is the initial containing block.

Negative values will position oustide of the containing block. These offset properties are: bottom left right top.

CSS+HTML	Results
<div style="background: #CCFFCC; height: 100px; width: 150px; border: double; margin: 6px;"> Containing Element <div style="position: relative; top: 20%; left: 40%; width: 60%; padding: 4px; border: solid; background: #CC9933;"> Positioned<br>Element </div> Stuff </div>	Containing Element Positioned Element Stuff

z-index

Normally elements are drawn in the order of the document flow. This property alters this renedering order and creates layers. There is conceptually a third axis which runs from front (highest integer values) to back (lowest integer values). Descendent elements have their stacking order relative to their ancestor (this is tree recursion as for containing blocks).

<span style="background: #CCCCFF; 
    position: relative; top: 0%; left: 2em;
    border: double; float: left; z-index: 2;">
  z-index: 2;
</span>
<span style="background: #CCFFCC; 
    position: relative; top: 1em; left: -1.8em;
    border: double; float: left; z-index: 3;">
  z-index: 3;
</span>
<span style="background: #CC9933; 
    position: relative; top: -.4em; left: .1em;
    border: 1px dashed; float: left; z-index: 1;">
  z-index:<br>1;
</span>