Making a 2 column layout using CSS: an introduction to “float” and “clear”

The CSS “float” property makes a block move as far to the left as possible and makes everything try to flow round it to the right. We can use this to make columns. If we set the width on the left column and the width on the right column and float both to the left then we get nicely lined up columns.

2 column layout using CSS

2 column layout using CSS


“css2col.html”


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Column Example</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="everything">
<div class="header">
<h1>I am the header</h1>
</div> <!-- end header -->
<div class="content">
<div class="leftcol">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div> <!-- end leftcol -->
<div class="rightcol">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan libero vel massa fringilla porta. Vestibulum pellentesque porta justo, vel porttitor orci imperdiet ut. Nulla a eros a sem blandit accumsan ut ac elit. Praesent iaculis varius ante a pulvinar. Cras ipsum quam, pulvinar quis convallis ut, dictum id sapien. Phasellus suscipit ornare mi vitae vehicula. Ut non erat metus. Curabitur ac nunc justo, ut dictum massa. Maecenas quis felis ut metus placerat congue eget sed eros. Fusce venenatis massa quis risus dignissim non tincidunt nisi venenatis. Morbi a lorem tortor, at suscipit est. Donec est dolor, mattis eget elementum sed, sollicitudin ut diam. Praesent ac quam vitae libero vehicula tristique. Ut et dui nibh, et ultrices nibh. Aenean vehicula, erat tincidunt blandit mollis, lectus est rutrum felis, eu pharetra nulla turpis sit amet augue. Aliquam lobortis eros a velit dignissim et euismod lacus facilisis. Nunc ut nisi ut enim bibendum ultrices sed sed leo. Nullam vestibulum nibh velit.
</div> <!-- end rightcol -->
</div> <!-- end content -->
<div style="clear: both;"></div>
<div class="footer">
And I am the footer
</div> <!-- end footer -->
</div> <!-- end everything -->
</body>
</html>
“style.css”


div.everything {
border: 1px solid black;
width: 800px;
}
div.header {
border: 1px solid green;
}
div.leftcol {
border: 1px solid red;
width: 200px;
float: left;
}
div.rightcol {
border: 1px solid blue;
width: 596px;
float: left;
}
div.footer {
border: 1px solid green;
clear: both;
}

Note that the width of the whole thing is 800 pixels but the widths of the 2 contained DIVs are less. That’s because the borders add to the width of the block as explained in my article on the CSS box model.

It’s difficult to put a border between the two unless you know that one of them is always going to be longer. If the content of one varies enormously (for example on a WordPress template) then you could set a background image to the container that both items are in.

The container in the example (div class=”content”) will not size height-wise to floating items contained in it, it will be 0 pixels in height (which becomes noticeable if you do something like setting a background image on it) unless you do a trick like the one I use here:


<div style="clear: both;"></div>

“clear: both;” makes this DIV (which doesn’t have anything in) only appear after the end of the floating blocks. Since this block isn’t floated it will affect the size of it’s containing block. “both” in this means clear any blocks floated to left or right, I could have used “clear: left;” in this example.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Leave a Comment