Introduction to CSS Positioning Properties Part 2 - The "clear" property
(Page 2 of 6 )
This property is used to give control of an element that appears after a floated element. Setting this property on the selected element will ensure that it will appear below any floated boxes that come before it. The possible values taken are the following:
clear: left;
The selected element will be displayed below any left-floating boxes being rendered before it.
clear: right;
The selected element will be displayed below any right-floating boxes being rendered before it.
clear: both;
The selected element will be displayed below any left-floating or right-floating boxes being rendered before it.
clear: none;
The selected element will not clear any floating boxes that come before it.
Let's show some examples that implement this property. Let's suppose that we've created a simple two-column layout, displaying a left-floated navigation bar, and a main container, floated to the right.
We need to be able to display a footer section after they're visually rendered. Just utilizing the "clear" property, that section is properly located.
<style type="text/css">
#navbar {
float: left;
width: 20%;
}
#content {
float: right;
width: 79%;
}
#footer {
clear: both;
}
</style>
And the markup would be the following:
<div id="navbar"><h2>Navbar</h2></div>
<div id="content"><h2>Content</h2></div>
<div id="footer"><h2>Footer</h2></div>
As we can see, the "footer" section clears the floated elements, and is displayed in the right way. There are many websites using these kinds of hooks to nicely implement page layouts. In fact, the floating approach is quite powerful for achieving several page layouts. It makes it even easier to emulate <table> designs, and the code is a lot more concise.
Next: The "z-index" property >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 9 
