Easy Clearing Of Floats
Posted by Robert on the 24th of April, 2007 at 5:14 PM GMT0. Permalink.Tags: CSS, HTML, Web Design, Web Standards
The following is an advertisement.
When I posted this, I was listening to: VNV Nation - Homeward
Web standards designers often need to make use of display:float to handle things like columns, navigation lists, and more. Usually these floats are followed by something like <div style="clear:both"></div>. It turns out there is an easier way.
I was reading 35 Designers x 5 Questions and saw a link for a way to clear floats without clear divs. The code that comes with the article is a bit confusing and sloppily written, but it works!
So, to make things easier to understand, I wrote my own example. The code below will do it for you, or you can view the example.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Easy Floats</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<style>
h1 {
background-color:#FFCCCC;
margin:auto;
width:500px;
text-align:center;
margin-bottom:0px;
}
div#outer{
width:500px;
overflow:auto;
padding-bottom:0px;
background-color:#AAAAAA;
margin:auto;
}
div#column1 {
float:left;
background-color:#CCFFCC;
width:200px;
}
div#column2 {
float:left;
background-color:#CCCCFF;
width:300px;
}
div#footer{
width:500px;
overflow:auto;
padding-bottom:0px;
background-color:#FFCCFF;
margin:auto;
}
div p{
padding:10px;
}
</style>
</head>
<body>
<h1>title</h1>
<div id="outer">
<div id="column1">
<p>
Left
<br>
Column
<br>
Floated
<br>
Left
</p>
</div>
<div id="column2">
<p>
Right Column float with no clears below it...
<br>
</p>
</div>
</div>
<div id="footer">
<p>
FOOTER not cleared...
</p>
</div>
</body>
</html>
This post can also be discussed on LiveJournal.
Add this page to del.icio.us or email it.
Comments on this page are closed due to age. If you need to say something, e-mail me.