Page 2 of 2 Like absolute elements, floats can also be placed to the sides of a container, but the coding and methods are very different, as are the effects. AP elements have no impact on flowed content and are placed via a coordinate system, while floats do control where inline content outside the float is displayed, and are themselves placed according to their order in the source code and their direction or float value. For details on these CSS behaviors, see Flowing and Positioning and Float: The Theory.
The arrangement is simply a container with two elements nested inside, each being floated, one left and the other to the right. Again, depending on the widths given to the floats, you may need to align inline content to the right. Note that either float may come first in the source. The code looks like this:
<div class="container">
<div class="left-element">
Content in left item
</div>
<div class="right-element">
Content in right item
</div>
</div>
.container {no required styles}
.left-element {
float: left;
width: 49%;
}
.right-element {
float: right;
width: 49%;
text-align: right; /* depends on element width */
}
If there is not enough room for the two floats to fit side by side, they will not just overlap, as AP elements do. Instead, floats wrap, forcing the float that comes second in the source to drop below the first float. Because of this, it is critical that the floats be prevented from coming into contact with one another. This is done by carefully controlling the float widths. Be sure to watch out for added padding and borders that increase the size of the floats. In some cases, these added properties can increase the size of the floats enough to cause wrapping.
Unlike absolute positioning, the float method does not require that the container be positioned, nor is it strictly necessary to give the floats widths, since all the newer browsers "shrink-wrap" floats around their contents. Even IE/win back to IE5 does this. Unfortunately, IE5/Mac does not, so when shrink-wrapping is desired, it may be necessary to give a width only to IE5/Mac, hiding the width from all other browsers. Here's how it may be done:
.left-element {float: left;}
.right-element {float: right;}
*>html .left-element {width: 49%;}
*>html .right-element {width: 49%;}
The second pair of rules supplements the first two, but the construction of the selectors prevents any browser other than IE/Mac from recognizing the selectors. The selector construction says: "Select any element with a class attribute of .leftelement when it is nested within HTML, and HTML is the direct child of any other element." It so happens that IE browsers (both Mac and Win) believe there is some kind of mystery element wrapped around the HTML element. This is strange because HTML is supposed to be the primary or root element. Thus, IE browsers obey, and all others ignore the rule. Also, since the > (child) combinator is used in the selector, and IE/Win does not support that combinator, the result is that only IE/Mac obeys the rule.
Going "widthless" on the floats will let the floats shrink to the size of the content, but if that content is a lengthy text, then line breaks must be added or the float will stretch as wide as the text line can go, possibly interfering with the other float. If widths are used, they may be in pixels, percentages, or ems. If percentage is used, don't give the floats each a 50% width. If the 1px rounding error should occur and the total width is 100%, then a dropped float will result. Better to leave some wiggle room.
Giving a text float a pixel width works fine, but if it is to be just one line and the text sizing is bumped up by the user, then the single line may become too wide for the assigned pixel width and will wrap to a second line. This fate may be prevented by giving the float a width in ems rather than pixels, because an em width will enlarge along with the text. Sometimes the rate of enlargement is not exactly the same, so experimentation may be necessary to achieve satisfactory results.
These basic techniques are not all-or-nothing methods, but may be joined or blended in various ways to get the desired page appearance. However, nothing is certain when dealing with real world layouts. These techniques may need to be "adjusted" when used on an actual page.
Once you know how this stuff is done, it becomes easier to rearrange the methods, widths, and other variables to solve most design problems. It's actually kind of fun when the pieces start to fall into place.
Approximate download size: 183k
Keywords
CSS, align elements, absolute positioning, float, align elements left and right, CSS task
