Friday, August 25, 2006

3 Column CSS Layout with a Fixed Centre Column Width

A little while ago, I had to write an intranet-based interface to allow some of our accoutning users to kick off some of our cube building processes. That in itself was an interesting exercise, but more interesting was the problem of layout. We have a strict corporate style (like most large companies nowadays) which covers the width of the page at the top, but the actual content, well, where do you put that?

There were a number of considerations here. Firstly, the header has a very symmetrical look about it so it made sense to have the content in the middle of the screen. The problem then is "How wide do I make it?" Well, I have a 17" LCD monitor at a resolution of 1280x1024 (anything less looks awful on these cheapo monitors), but there are a lot of people in our organisation who, for some reason, run 800x600 even on 17" CRTs. So, taking into account that the interface itself is deliberately spartan, I plumped for an 800 pixel wide content area in the middle of the screen.

Naturally, I wanted to do this using divs rather than tables but the problem I found was that every 3 column layout I found used two fixed width outer containers and a fluid center column which was exactly the opposite of what I wanted. I also wanted a technique that was cross browser compatible. Eventually, after a lot of searching, I came accross a blog post by a chap called Alessandro who had done just what I wanted. As a result, I tried it out and sure enough it worked a treat in both IE and FireFox. I'm sure I'll be lambasted for it but I couldn't be bothered to check Opera et al, mainly because no one in the company uses it nor will they as access is through thin client and Citrix for most users, precluding the possibility of choosing their own browser. So, I thought I'd provide a practical example to go along side Alessandro's original concept code.

Here's the html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
        <meta http-equiv="Content-Style-Type" content="text/css">
        <link href="common800.css" type="text/css" rel="stylesheet">

        <div id="container">

        <!-- Place page header/branding in here -->

        <div id="leftContainer">
            <div id="padLeft">&nbsp;</div>

        <div id="leftText800">
            <!-- Enter page contents in this container-->


        <div id="rightContainer">
            <div id="padRight">&nbsp;</div>


And here's the css:






No comments: