How to Set up Columns with CSS Floats

The use of CSS, or Cascading Style Sheets, for formatting columns prevents a lot of code bloat and allows the page to load faster. The following CSS Tip shows how to use CSS floats to format a layout of several columns instead of using tables.

image column 1
image column 2
image column 3
image column 4
image column 5

Set up CSS Floats

First you need to set up a rule in your CSS file for floating content. You can either set up specific widths for your floats in CSS, if you will be using a specific width multiple times on the site, or you can add a style to specify varying widths on each column like the following:

CSS:

.floatleft { float:left; }

Here is how to set up a float with a specific width, if all items are the same width.

.floatleft250 {float: left; width: 250px; margin:5px; }

HTML:

Now you need to set up your web page to call that class from your css file. Surround your images, or other content, with the following:

<div class="floatleft250">
or
<div class="floatleft" style="width:250px;margin:5px">

The problem with using specific widths in rules is you end up with a lot of rules in your CSS file. However adding style tags on Divs adds a lot of code to your HTML file also, which defeats the purpose of setting up CSS in the first place, so whichever method produces the less code on your site will be the better choice.

Calculating the Width of your Columns

If there isn't enough room on the page for the columns the last one(s) will wrap to the left like the following example:

image column 1
image column 2
image column 3
image column 4
image column 5


In order to make sure you have enough room for your columns you need to determine how many columns will fit in the content area of your page. Deduct the size of the columns plus any margins you have on your columns. So for 3 columns 250 pixels wide with 5 pixel margins on each side of the columns that would equal 780 pixels (assuming there is no left or right sidebar on the page). Windows XP often adds extra margin also so be sure and check your site in Windows to make sure you allowed for enough space.

Centering Columns or Floats

A 3 column layout with columns each 250 pixels wide, will fit nicely within a 1000 pixel page (allowing space for margins):

250 pixels x 3 columns = 750 pixels
5 pixel margins on each side of 3 columns (or 6 margins) = 30 pixels
Total width: 780 pixels

However these columns will be aligned to the left side of the page. If you want these columns centered on the page set up a box in CSS with a specific width that is centered and big enough to contain them.

Instead of adding padding to the rule (because it may change on different data on your site) add it as a style tag to the div instead). I added a class for border on the sample below so you can see the padding and margins on the columns.

A 3 column layout Using Floats

CSS:

.box800 {width:800px; margin:0 auto; }

HTML:

<div class="floatleft250 border" style="padding:5px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
</div>
<div class="floatleft250 border" style="padding:5px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
</div>
<div class="floatleft250 border" style="padding:5px;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
</div>

PS: you will need to add a rule for clear:both in your CSS file after the last float in order for any following HTML code to line up properly on the page, like this:

CSS:

.clearboth {clear:both; }

HTML:

<br class="clearboth">


The above code should result in 3 columns with 5 px padding, 5 px margins, 1 pixel borders and centered on this page. If you want a layout with 4 columns on a 1000 pixel wide page, you'll have to reduce the width of each column as it won't fit in that space.

Copyright © July 12, 2009 - Updated 11-04-20
Lori's Web Design
All Rights Reserved