Next Steps

Want to get started?

Need more answers?

Wisdom

Designers have a dual duty; contractually to their clients and morally to the later users and recipients of their work.

Hans Höger

Simple CSS column layout

A lot of designers are currently struggling to accomplish page layout that was simple to achieve using tables but is frustratingly difficult (if not impossible) with CSS. The following example shows a simple method to display a mutli-column content layout without having to worry about complex floats, margins, and padding.

It all begins with a simple unordered list with a line item and div for each column. We assign an id selector to each item that may have individual CSS styles applied to it (eg id="column1"). Then add a style sheet class for all items that share formatting (eg: class="r_column").

<ul>
<li>
<div id="column1" class="r_column">
<p>First Column</p>
</div>
</li>
<li>
<div id="column2" class="r_column">
<p>Second Column</p>
</div>
</li>
<li>
<div id="column3" class="r_column">
<p>Third Column</p>
</div>
</li>
</ul>

The real magic occurs in the CSS where we make the list appear horizontally rather than vertically. Because of differences in browsers we have to set the margin and padding explicitly. The rest is explained in the code below.

ul {
clear:both; // needed to clear the floated divs
}

ul li {
padding: 0; // removes spacing between items
margin: 0; // removes spacing between items
display: inline; // makes the list side by side
list-style:none; // removes the bullet from the list
}

div.r_column {
margin: 0 5px; // set the space between items
display: block; // needed to correctly render the div
float:left; // make divs appear side by side
width: 20em; // set the width of the column
}

Put it all together and we get:

First Column
Second Column
Third Column

Now isn't that about as simple as you can get?

Add your comment

Your name: *

E-mail: *

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account associated with the e-mail address you provide, it will be used to display your avatar.

Homepage:

Subject:

Comment: *

Enter the code below: *

  .d@HMMb.    .d5@H@b.    dSM5    S9959SS8H8  8M@959S8H  
 d88P  Y59b  d9@P  YH8b  dSSE9          dH5P  SM9        
      .dH9P  55S    @8M    SS9         d8@P   5S9        
     885S"   Y8Eb. d@8S    SE9        dM5P    EHS9HEEb.  
      "Y8b.   "YM@8PMEH    5H8     SMMSSM58        "YEHb 
 MSM    555         MMM    HH5      d58P             88E 
 YESb  dM5P  Y@5b  d85P    5@H     dMMP       Y8Eb  dHEP 
  "YES99P"    "YE@5HP"   S8@M588  d5@P         "YSHSMP"

Navigation