3 and 2 column full screen (width & height) layouts (CSS)

Question

Hi all,

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

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 2

You can also look at Layout Gala - 40 examples of different two and three percent and fizxed-sized column layouts.

Answer 3

http://www.alistapart.com/articles/holygrail

That should be exactly what you need.

Answer 4

Take a look at Yahoo's YUI: Grids builder.

Answer 5

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 6

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 7

I have reworked my sample template so you can see all three of your requested formats in action.

This is a CSS solution, no tables involved. I have set this up so the side columns are fixed width the header/footer are fixed height. Everything else is fluid.

With all modern browsers, excepting for IE7, the content is centered both vertically and horizontally. IE7 has issues with its box model. I believe IE8 have these resolved.

The center box does center vertically in IE7 because I nested a 1 cell table in the center div as a hack around IE7 box model problems. I know this is dumb and ugly but it was just to show it worked.

See it in action - Three Column Full Screen Layout

I am a bit surprised this answer did not garner a single vote or capture the bounty. It works, its simple, and it fulfills everything the OP asked for. Oh well.

The CSS

DIV { text-align: center }
#h0, #f0 { float: left; clear: both }
#h1, #f1 { height: 100px; float: none; width: 800px } 
#l0 { float: left; clear: left; }
#c0, #r0 { float: left; clear: none }
#l1, #r1 { width: 150px }
#c1 { width: 500px }
#l1, #r1, #c1 { height: 350px }
#h0, #f0 { background-color: orange }
#l0 { background-color: red }
#r0 { background-color: blue }
#c0 { background-color: yellow }

#h1, #f1, #l1, #r1, #c1
{ display: table-cell; vertical-align: middle; }

The HTML

<div id="h0"><div id="h1">
  header
</div></div>

<div id="l0"><div id="l1">
  left column
</div></div>

<div id="c0"><div id="c1">
  <img alt="dilbert (3K)" src="../gif/dilbert.gif" height="82" width="80" />
</div></div>

<div id="r0"><div id="r1">
  right column
</div></div>

<div id="f0"><div id="f1">
  footer
</div></div>

Answer 8

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 9

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.

Answer 10

This should have all you need:

http://maxdesign.com.au/presentation/page_layouts/

And a more general solution to all your CSS problems:

http://www.blueprintcss.org/

Answer 11

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 12

you should check out Elastic CSS Framework:

http://elasticss.com/two-columns-based-layout/

Cheers.