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