CSS Floats and CSS Clear DIV’s
The Difference between CSS Floats and CSS Clear DIV’s
Web Designers use CSS float values without considering how it is going to effect their rendering and therefore Cross Browser Compatibility issues arises. Floats helps us control columns of HTML data using DIV based layouts. Many developers use float values unnecessarily in their layout implementation and thus many issues arises with their implemented layouts.
I would suggest use clear div’s with floats. But unfortunately most of my fellow developers don’t know how to use clear div’s with float, so they make a mess of it. I normally use float div’s and clear div’s separately else it would cause issues. For a two column layout i will normally declare a container div, with one left float and one right/left float div depending on my need. And after both the div’s are closed i will use a clear div before closing the main container. So what is the use of clear div after both columns are closed. Let’s suppose we have the following code
<div class="main_container"> <div class="content"> <h1>Page Title</h1> <div class="left-content"> <h2>Lorem Ipsum dolor sit amet</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue malesuada bibendum. Morbi et neque dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p> <p>Aenean congue placerat ipsum sit amet dignissim. Integer tincidunt, neque in dapibus porttitor, eros ipsum bibendum orci, quis sodales sapien massa id nunc. Nunc leo enim, faucibus id consequat eget, congue eu metus.</p> </div> <div class="right-content"> <h3>Lorem Ipsum dolor sit amet</h3> <p>Aenean congue placerat ipsum sit amet dignissim. Integer tincidunt, neque in dapibus porttitor, eros ipsum bibendum orci</p> <h3>Lorem Ipsum dolor sit amet</h3> <p>Aenean congue placerat ipsum sit amet dignissim. Integer tincidunt, neque in dapibus porttitor, eros ipsum bibendum orci.</p> <h3>Lorem Ipsum dolor sit amet</h3> <p>Aenean congue placerat ipsum sit amet dignissim. Integer tincidunt, neque in dapibus porttitor, eros ipsum bibendum orci.</p> </div> </div> <div class="footer"> <p>Aenean congue placerat ipsum sit amet dignissim. Integer tincidunt, neque in dapibus porttitor, eros ipsum bibendum orci, quis sodales sapien massa id nunc. </p> <p>Copyrights notice</p> </div> </div>
Following CSS is used to stylize this code
.main_container { width: 800px; margin: 50px auto; }
.content { margin: 0 0 40px 0; }
.left-column { float:left; width: 540px; }
.right-column { float:right; width: 240px; }
h1 { font-size: 32px; color: #069; border-bottom: 2px solid #eee; }
h2 { font-size: 24px; }
h3 { font-size: 18px; border-bottom: 1px solid #eee; padding: 0 0 10px; margin: 0 0 10px; }
.footer { border-top: 1px solid #ccc; background: #eee; color: #333; }
If you compile and run this code you will see the following output. If you notice you will see that the footer div background is actually showing behind the left and right column of the layout.
Why is it so ? a person who uses floats values too much will simply float the content div and footer div to left and thus the problem will be solved, everything will work and he will be satisfied that i wrote a cross browser compatible very clean code
But what if i suggest a cleaner method for the same approach and solve this issue. Lets clear div’s ?
A normal clear div css would be like this
.clear { clear: both; display: block; height:0px; overflow:hidden; }
If we add this code below the columns code like this
<div> <div> <h1>Page Title</h1> <div> <h2>Lorem Ipsum dolor sit amet</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue malesuada bibendum. Morbi et neque dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p> <p>Aenean congue placerat ipsum sit amet dignissim. Integer tincidunt, neque in dapibus porttitor, eros ipsum bibendum orci, quis sodales sapien massa id nunc. Nunc leo enim, faucibus id consequat eget, congue eu metus.</p> </div> <div> <h3>Lorem Ipsum dolor sit amet</h3> <p>Aenean congue placerat ipsum sit amet dignissim. Integer tincidunt, neque in dapibus porttitor, eros ipsum bibendum orci</p> <h3>Lorem Ipsum dolor sit amet</h3> <p>Aenean congue placerat ipsum sit amet dignissim. Integer tincidunt, neque in dapibus porttitor, eros ipsum bibendum orci.</p> <h3>Lorem Ipsum dolor sit amet</h3> <p>Aenean congue placerat ipsum sit amet dignissim. Integer tincidunt, neque in dapibus porttitor, eros ipsum bibendum orci.</p> </div> <div></div> </div> <div> <p>Aenean congue placerat ipsum sit amet dignissim. Integer tincidunt, neque in dapibus porttitor, eros ipsum bibendum orci, quis sodales sapien massa id nunc. </p> <p>Copyrights notice</p> </div> </div>
our issue is solved. Lets look at the output of this change
So whats the difference between both approaches
- Floats is basically used for floating content to left, right or none so it should be used what it is basically intended for.
- Clear is used to clear space, it will clear all the preceding div’s. So its more meaningful.
- If you are going to update the site in future floats might not create issues in future, but what if a non technical person is going to update it in future. It will be difficult for him/her to use where floats are required, so they will mess up the site
- If you can explain how to use clear div’s to your client they can easily manage the site without needing any technical person
There are many advantages where you can use clear div’s
- Clearing floating content
- Creating space between two block elements, like lets say you want to create 100 pixels space between two vertical items. You can simply add a clear div with height 100px
- Sometimes margins also make things inconsistent throughout all the browsers like if you add bottom margin to a div and the next div has some top margin, it will only take the highest margin of both. For example if you have margin-bottom: 100px; and the next div has margin-top: 50px; it will add margin of only 100px in most of the browsers but ie6 and few older browsers might take it as 150px of added margins thus causing inconsistency.
