Page 2 of 4 Since you've already read Float: The Theory, you shouldn't be surprised to find that floating the #secondary-content div and giving it a width allows the adjacent static content to move up beside it. Add the following styles to the existing rule for #secondary-content in the head of the page:
#secondary-content {
float: left;
width: 200px;
padding: 10px;
background-color: #ffc;
}
Try changing the float value from left to right and notice that although the float now displays on the right side of the page, the same basic behavior is going on. As long as the float is preceding the static content in the source of the page, it will display on the same horizontal level as the static content, because although the float itself does not move up, the static content following it does in order to wrap around it.
Image 1
But floating and getting the divs to display on the same horizontal level is not enough to create the look of columns. When the float ends, the remaining static content wraps around it (Image 1). If you want to keep the side of #main-content straight no matter where #secondary-content ends, you need to assign #main-content a margin on the side of #secondary-content big enough to push it out from under the float. Add the following style to the #main-content rule:
#main-content {
margin-left: 220px;
padding: 10px;
background-color: #dfdfdf;
}
The 220-pixel margin is exactly the size of the float, since it has a declared width of 200 pixels plus 10 pixels of padding on each side. (Don't understand why the float takes up 220 pixels? Read The Box Model Problem for an explanation and fixes for older versions of IE.) This leaves a gap beside the static content for the float to sit in, instantly creating the appearance of columns (Image 2). That's really all there is to it!
Image 2
Although pixel widths were used for the width and padding of the float in this example, you could just as easily use percentages or ems for these values to create a fully liquid or elastic layout, respectively.
There's a small hitch in IE, however. If you look closely in that browser, you will see that when the float ends, the text in the #main-content div jogs over to the left by three pixels (Image 3).
Image 3
This bug is called the Three Pixel Text Jog, and you can read a full explanation of it and its fixes in the article Float: The Bugs (Part Three). But for now, here's the condensed version: assign a right margin to the float that is three pixels smaller than you want the gap between the divs to be, set hasLayout (a made up Microsoft property that cannot be turned on or off directly) on the non-float, and remove the left margin on the non-float. Here's what those styles look like in our page:
* html #secondary-content {
margin-right: -3px;
}
* html #main-content {
height: 1%;
margin-left: 0;
}
Since we want the gap between the two divs to be zero, a right margin value that is three pixels smaller than this, -3px, is used on the float. The height: 1% on the #main-content div is a hasLayout trigger. Setting zoom: 1 could also be used to set hasLayout, but width could not in this case, since we need this div to remain widthless and adapt to the size of the window.
For more information on hasLayout, see the official (but not very helpful) Microsoft page on the subject and the comprehensive article On Having Layout by Ingo Chao.
These styles are hidden from all browsers except IE with the Star HTML hack, but in a real page, using conditional comments would be a safer way to feed the hacks to IE. Conditional comments are special types of comments that only IE can read. Because they are truly just HTML comments, all other user agents ignore their contents, so they never see these hacks. You can read more about conditional comments at MSDN.
Page 2 of 4 Previous
1
2
3
4
Next
Keywords
CSS, cascading style sheets, styles, styling, floats, floating, widths, margins, columns, layouts, liquid, fluid, fixed, Internet Explorer, IE Three Pixel Text Jog, 3px Gap, bugs, wrapping, divs
