3 and 2 column full screen (width & height) layout

Question

I was wondering if there were any simple examples that did the following

    * A right and a left fixed column with a fluid center. 
      With full height and width and a header and footer.
    * A single left fixed column with a fluid content column 2. 
      With full height and width and a header and footer.
    * A single right fixed column with a fluid content column.
      With Full height and width and a header and footer.

I've tried some methods (such as the ones listed on listapart) but they seemed really complicated and they used a lot of divs, or they just didn't support padding.

Thanks in advance

Answer 1

I know that it's badwrong to do, and I'm a semantic coder through-and-through (that wasn't meant to rhyme), but I still use a single layout table to do columns.

Why? It's interoperable and simple. It doesn't require ridiculous CSS hacks that just barely hold things together (seriously, floats are meant for typography, not layout). It displays identically in every browser in current use. It. Just. Works. It's a semantic hack, but sometimes you just gotta do what you gotta do.

However, there is light on the horizon. The table-* display values for CSS make equal-height columns trivial, though they can still violate source order (you still need your left-most column to be before your center column, even if it's a nav section and should come near the end of your page code). IE8, and all non-IE browsers, support these already.

CSS3 Grids and CSS3 Template Layout will both solve this issue properly, but they're still quite a bit away from being usable. A coder can dream, though, right?

Answer 2

Check this site out:

http://matthewjamestaylor.com/blog/perfect-stacked-columns.htm

Other layout examples from the above:
http://matthewjamestaylor.com/blog/perfect-2-column-left-menu.htm
http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
http://matthewjamestaylor.com/blog/perfect-3-column.htm

Answer 3

I found the Liquid two column layout at Floatutorial extremely helpful when setting up a full height two column layout - fixed left column with a stretchy right column, with a header and foot row to boot. In their example, they suggest the left column is used as navigation, but it could be anything.

With Floatutorial, not only do you get a sample HTML structure and CSS out of it, but when you're done, you understand why you have what you end up with.

I briefly tried the YUI: Grids builder as suggestd by @JohannesH, and had some small problems with it, but the worst problem is that it was so convoluted that I had no idea why it wasn't working, or why it was supposed to have done.

Edit: there's also a tutorial for a liquid three column layout (which I've not used), and a whole bunch of other tutorials that use floats.

Answer 4

In response to a message from the original poster, here's how I would do the first request with a <table> (the others are trivial modifications):

<style>
body {
    height: 100%;
}

#container {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
}

#top, #left, #center, #right, #bottom {
    border: 1px solid black;
    text-align: center;
    vertical-align: center;
}

#left, #right {
    width: 200px;
}

#top, #bottom {
    height: 200px;
}
</style>

<table id="container">
    <tr>
        <td colspan=3 id="top">header</td>
    </tr>
    <tr>
        <td id="left">left</td>
        <td id="center">center</td>
        <td id="right">right</td>
    </tr>
    <tr>
        <td colspan=3 id="bottom">footer</td>
    </tr>
</table>

Answer 5

The examples you found in alistapart.com are as complicated as they need to be, and every serious example that you can find about those layouts supports padding. You will find (and already found) a lot of good examples about it in the internet, just spend some time trying to understand them and you will see that they are not so complicated, in the end.

Anyway, I have a good demo layout similar to the second you are looking for, here: http://www.meiaweb.com/test/BMS_DM_NI/

Basically, the html is this:

<body>
        <div id="head">
            <h1>Title</h1>
        </div>
        <div id="main">
            <div id="navigation">

               <!-- navigation content -->

            </div>

            <div id="content">
                <h2>Content Title</h2>
                <p>
                   <!-- main content here -->
                </p>
            </div>
        </div>
    </body>

And the css is:

html {
    overflow: auto;
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    width: 100%;
    height: 100%;
    line-height: 1.5em;
}

#head {
    height: 20px;
    background-color: #666;
    color: #AAA;
    padding: 20px 20px;
}


#navigation {
    width: 210px;
    padding: 20px 20px;
    background: #efefef;
    border: none;
    border-right: solid 1px #AAA;
    float: left;
    overflow: auto;
}

#content {
    margin-left: 250px;
    padding: 20px 20px;
}

I think it's simple enough, and it works in all modern browsers.

Answer 6

There is a pre-fabbed css grid system that is based on the Golden Rule, and implements all types of column formats quite readily. Check out 960 Grid System. You can accomplish your goals without the use of tables. The nice thing that by using a pure CSS solution you can alter your layout more rapidly.

There is also a jQuery fluid implementation that has a fluid layout that you may be interested in.