Simplest 3 Columns Layout with CSS only.

Share This Post

After experimenting with Designing a 3 columns web page using TableLayout I have came with the solution that is, IMO, simplest possible:
<!-- vim: ts=2:sw=2:nu:fdc=2:spell

An Application Page

@author    Ing.Jozef Sakáloš
@copyright (c) 2008, by Ing. Jozef Sakáloš
@date      2. April 2008
@version   $Id$

@license application.html is licensed under the terms of the Open Source
LGPL 3.0 license. Commercial use is permitted to the extent that the 
code/component(s) do NOT become part of another Open Source or Commercially
licensed development library or toolkit without explicit permission.

License details: http://www.gnu.org/licenses/lgpl.html
-->

  <!-- Layout Mandatory Styles -->

    #ct-wrap {
      text-align:center;
    }
    #ct {
      text-align:left;
      margin:auto;
    }
    #north, #navlinks, #south {
      float:none;
      clear:both;
    }
    #west {
      float:left;
      clear:left;
    }
    #center {
      float:left;
    }
    #east {
      float:right;
      clear:right;
    }

  <!-- Mandatory Dimensions -->

    #ct {
      width:640px;
    }
    #west {
      width:180px;
    }
    #east {
      width: 80px;
    }
    #center {
      width: 380px;
    }

  <!-- This Example Customizations -->

    body {
      font-size:13px;
      vertical-align:middle;
      margin:0;
      padding:0;
    }
    #north {
      height:40px;
      color:white;
      background:#203d8e;
    }
    #navlinks {
      height: 24px;
      color:blue;
      background:#ffc800;
    }
    #west, #center, #east {
      height:400px;
    }
    #west, #east {
      color:white;
      background:#203d8e;
    }
    #south {
      height: 30px;
      background:#ffc800;
    }
    #center {
      background:#e8e8e8;
    }
north
west
center
east
south
Works perfectly cross-browser in both standards compliant mode and quirks mode. Online example of the above: Simplest 3 Columns Layout with CSS Example
Follow me:
Latest posts by saki (see all)

Want to collaborate on an upcoming project?