Saki's Blog » css

Simplest 3 Columns Layout with CSS

Saki — Tue, 08 Apr 2008 02:30:33 +0000

After experimenting with Designing a 3 columns web page using TableLayout
I have came with the solution that is, IMO, simplest possible:


<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">
  <link rel="shortcut icon" href="../img/extjs.ico">
  <title>3 Columns Layout Example</title>
 
  
  <style type="text/css">
    #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;
    }
  </style>
 
  
  <style type="text/css">
    #ct {
      width:640px;
    }
    #west {
      width:180px;
    }
    #east {
      width: 80px;
    }
    #center {
      width: 380px;
    }
  </style>
 
  
  <style type="text/css">
    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;
    }
  </style>
</head>
<body>
<div id="ct-wrap">
  <div id="ct">
    <div id="north">north</div>
    <div id="navlinks">navlinks</div>
    <div id="west">west</div>
    <div id="center">center</div>
    <div id="east">east</div>
    <div id="south">south</div>
  </div>
</div>
</body>
</html>

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

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

How to center an element in quirks mode

Saki — Tue, 08 Apr 2008 01:57:25 +0000

It has been my problem because I needed to use quirks mode due to Ext not playing well in standards compliant mode and still have an element, a container with fixed width, centered in the browser’s window working cross-browser.

Standard approach is to use css:

#ct {
    width: 960px;
    margin: auto;
}

Nice and simple but it doesn’t work in IE in quirks mode, works in strict mode though.

Another approach I’ve found googling for a solution was:

body {
    text-align: center;
}
#ct {
    width: 960px;
    margin: auto;
    text-align: left;
}

This works, also in IE, but the problem is that Ext creates many elements as direct children of the body so it introduced many rendering problems such as menu items appeared centered, combo box dropdown items were centered, messages in message boxes, etc.

Finally, this works everywhere without bad side effects:

#ct-wrap {
    text-align: center;
}
#ct {
    width: 960px;
    margin: auto;
    text-align: left;
}

with this markup:

<body>
  <div id="ct-wrap">
    <div id="ct">
    </div>
  </div>
</body>

We do not touch body here but we create a “container wrap” that center aligns texts and inside of it our real container in which we set text alignment back to left.

Works perfect cross browser.

CSS File Pattern

Saki — Fri, 04 Apr 2008 03:28:40 +0000

/** vim: ts=4:sw=4:nu:fdc=4:nospell
 *
 * A CSS File
 *
 * @author    Ing.Jozef Sakáloš
 * @copyright (c) 2008, by Ing. Jozef Sakáloš
 * @date      5. April 2008
 * @version   $Id$
 *
 * @license A CSS File 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
 */
 
/* eof */