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

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.
     dM558    .d@@E@b.       dM558   M999M59E@S   .d9E@Eb.  
dHP@8S d95P Y9Eb dHP@8S dE5P d5EP YE5b
d5P E@8 5E8 d5P E@8 dH8P 5S5
dSP HM@ @EEd9@5b. dSP HM@ dMMP .d@8P
d9M 8M5 @S5P "Y85b d9M 8M5 EMM8HE9E .odH8HP"
ESSS5EE8@9 MME HE8 ESSS5EE8@9 dH8P d8EP"
@5S YS9b dMHP @5S d98P 8@S"
99H "Y55MSP" 99H dS9P HMSE8EM@M