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

Designing a 3 columns web page using TableLayout

Saki — Fri, 04 Apr 2008 22:26:48 +0000

Design Goals

I have decided to re-design my webpage because I used some nested floating divs and I started to lose track of the hierarchy and css rules assigned to them. The design goals were:

Fixed width content area always displayed centered in the browser window
Fixed width columns: left for navigation, center for content and right for AdSense
Standard 5 regions: north, west, center, east and south (not used yet)
Use Ext as much as possible
Keep css stylesheets as simple and straightforward as possible
Content generated by Ext
Cross-browser

The Main Container

Let’s create it as first parent of body:

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

and css:

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

So far so good, this works fine in all major browser but not, as usually, in Internet Explorer. Therefore, we need one more css rule that can create some minor problems we will have to solve later such as combo box dropdown list will be center aligned. Anyway, I haven’t found any better way for IE.

/* not needed if you use a strict doctype */
body {
  text-align: center;
}

Update: I have meanwhile found that IE supports auto margins the expected way in strict mode. On the other hand, Jack Slocum advocates against using a doctype as it can trigger IE bugs resulting in rendering problems.

Now, it is up to you if you align body text to center and then you need to fix many Ext classes that inherits this rule from body or you use a strict doctype and you will risk the IE mis-behavior.

I have chosen to use the xhtml 1.0 strict doctype. Do not use the above text-align:center body rule if you use a strict doctype.

Ext Layout

I needed north, west, center, east and south so first idea was to use BorderLayout rendered to ct and with autoHeight:true. After some trials and errors I found out that BorderLayout is not usable for this purpose so I’ve switched to TableLayout.

Now, the outermost container is Ext.Panel with TableLayout configured like this:

var layoutPanel = new Ext.Panel({
     id:'main-layout'
    ,layout:'table'
    ,layoutConfig:{columns: 3}
    ,defaults:{border: false}
    ,items:[{
    	 id:'north'
    	,colspan:3
    	,cellCls:'td-north'
    	,border:false
    	,contentEl:'north-content'
    },{
    	 id:'west'
    	,cellCls:'td-west'
    	,border:false
    	,contentEl:'west-content'
    },{
    	 id:'center'
    	,cellCls:'td-center'
    	,border:false
    },{
     	 id:'east'
    	,cellCls:'td-east'
    	,border:false
    	,contentEl:'adsense'
    },{
    	 id:'south'
    	,colspan:3
    	,cellCls:'td-south'
    	,border:false
    }]
});

Content Elements

Some page content is statical, written in HTML markup so I have used contentEl:’div-id’ to put it to right place (cell) of the layout. I already have divs with ids: north-content, west-content and adsense.

Some stylesheets are needed too at this point, keeping in mind that cellCls is assigned to the table cells (tds) and that table does not fill 100% of the container by default. This css hadles it:

/* not needed if you use a strict doctype */
body {
  text-align: center;
}
#ct {
  margin: auto;
  width: 1020px;
  /* not needed if you use a strict doctype */
  text-align: left;
}
#main-layout table {
  width: 100%;
}
.td-north {
  height: 90px;
}
.td-west {
  width: 190px;
  vertical-align: top;
}
.td-center {
  width: 700px;
  vertical-align: top;
}
.td-east {
  padding: 0 0 0 10px;
  vertical-align: top;
}
.td-south {
  height: 30px;
}

Conclusion

Finally, it is easy. I have all design goals in and if I need to render anything to, let’s say center, I just grab a reference to the panel’s body and render to it. For example:

Ext.get('center').body.update('Center Content');

or whatever else. If I need to put a static content in it I write it to a container and I’ll use contentEl as I did for north and east.

And the result is: http://extjs.eu . I like it!