Simplest 3 Columns Layout with CSS

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;
    }

Works perfectly cross-browser in both standards compliant mode and quirks mode.

Online example of the above: Simplest 3 Columns Layout with CSS Example

• Author
• Recent Posts

Follow me:

saki

I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.

Follow me:

Latest posts by saki (see all)

• Ext, Angular, React, and Vue - 27. June 2019
• The Site Resurgence - 11. February 2018
• Configuring ViewModel Hierarchy - 19. June 2015