COM271, Week 5

Floated Elements

Syllabus | Table of Pages | Assignments | References and Useful Links

Early in browser development, the html attribute align provided a means to allow a page element to move to the right or left, with the rest of the page flowing around it. Mostly, this just meant that we let images move and text flow.

CSS float: The CSS attribute float has the same effects. Combined with clear and margin effects, float provides a set of positioning options that allow flexibility with sophistication, in a design mid-way between straight element-by-element normal rendering and highly constrained absolute or fixed positioning.

Floated elements and page flow: A floated element moves to the side of its nearest positioned containing element. This is either the body element, or any that has been positioned (see Static, relative, and absolute positioning).

Example 1—Simple floated div:

Here is a div floated to the right:

Structure:

<div class="greybox">
<div class="orangebox">&nbsp;</div>
</div>

CSS:

div.greybox{background-color:#666;width:300px;margin:10px 0 10px 35px;min-height:100px;border:2px outset #ccc;}
div.orangebox{background-color:#F93;width:100px;height:60px;border:2px outset #f93;float:right;}

Example 2—Floated div affecting text:

Here are the same divs, but now the outer div contains some text, too. Notice that although the floated element has been "removed" from the page, page content does not underflow the repositioned element. (Compare this to an absolute positioned element, previous section.)

Example 3—Floated elements with margin

This time, I've added 10px margin all around the orange div. Notice the effect on the text and the "distancing" of the element from the border of its container:

<div class="greybox">
<div class="orangebox" style="margin:10px;"> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam turpis, luctus id tristique quis, scelerisque id tellus. Nullam at justo a velit porta dignissim. Fusce sagittis turpis felis, sit amet volutpat leo.</p>
</div>

Example 4—Floated elements with negative margin

What if we used a negative margin on the floated element? Here, I've applied -15px to the top and right of the right-floated element (style="margin:-15px -15px 10px 10px;). Notice that the element appears to be positioned partially outside of its containing div (i.e., its "positioning" context"):

Example 5—Floated elements with extreme negative margin

Can a floated, "contained" element be rendered outside of its container if enough negative margin is applied? Here, I apply 15px (positive margin) to the top and -150px to the right of the floated element. Your answer is yes!

The Third Dimension: CSS offsets (top, left, etc.) operate in two dimensions, the X and Y planes of the screen. The CSS attribute z-index adds a third plane. Values for z-index are positive integers. An element assigned a positive z-index would appear to be "in front" or "above" its containing element. The higher the value, the "closer" the element would be to the user.

Here, two independent divs are both positioned absolutely. I've applied a z-index of 1 to the orange div and a z-index of 3 to the grey div (which contains text). Note that I use an invisible positioned div to establish a positioning context for both the grey and the orange divs:

<div style="position:relative;">
<div class="orangebox" style="position:absolute;top:0;left:210px;z-index:1;"> </div>
<div class="greybox" style="position:absolute;left:0;top:10px;z-index:3;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam turpis, luctus id tristique quis, scelerisque id tellus. Nullam at justo a velit porta dignissim. Fusce sagittis turpis felis, sit amet volutpat leo.</div>
</div>

Here is the same setup, except the orange box is given a z-index of 3 and the grey box a z-index of 1:

A typical application for this would be in the development of a navigation with fly-out menus that need to appear on-top of content text. We'll do this in a later Meyer project, CSS list-based menus (More Eric Meyer on CSS, project 6). The navigation div would be assigned a higher z-value than the adjacent content div, so that flyout menus would appear above content.