Designing a 3 columns web page using TableLayout

Code in this post can be obsolete, however, principles and theory may still apply.
See also: Simplest 3 Columns Layout with CSS

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:

and css:

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.

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:


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:



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:

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: I like it!

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on PinterestEmail this to someone
Follow me:


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)


  1. says

    Dear Jsakalos!
    Im writting because I’m just too desperate and I don’t know what to do with my website, I’m trying to use just one php file (index.php) and another php file (module.php) that is the responsible for server side communication and give all responses, in the index.php I want to load body content dynamically with Extjs but if I try using tpl’s it will be really annoying and will have to write lots of code. I just want to use ajax with extjs to load dynamically some interface elements like the user menu, some static html elements and flash media components.
    So the question is, How can i do this?

We will be happy to hear back from you

Please Login to post a comment