views:

3428

answers:

11

I'm developing a 3-column website using a layout like this:

    <div id='left'   style='left:      0; width: 150px; '> ... </div>
    <div id='middle' style='left:  150px; right: 200px'  > ... </div>
    <div id='right'  style='right:     0; width: 200px; '> ... </div>

But, considering the default CSS 'position' property of <DIV>'s is 'static', my <DIV>'s were shown one below the other, as expected.

So I set the CSS property 'position' to 'relative', and changed the 'top' property of the 'middle' and 'right' <DIV>'s to -(minus) the height of the preceding <DIV>. It worked fine, but this approach brought me two problems:

1) Even though Internet Explorer 7 shows three columns properly, it still keeps the vertical scrollbar as if the <DIV>'s were positioned one below the other, and there is a lot of white space after the content is over. I would'n like to have that.

2) The height of these elements is variable, so I don't really know which value to set for each <DIV>'s 'top' property; and I wouldn't like to hardcode it.

So my question is, what would be the best (simple + elegant) way to implement this layout? I would like to avoid absolute positioning , and I also to keep my design tableless.

A: 

Try floating the div's to the left, that will keep them all on the same line - assuming there is enough spacing.

Joshua
A: 

Firstly, relative positioning does what you've described: it reserves space in the original location but displays the DIV offset by some amount.

If you float the DIVs then they will stack left-to-right, but this can cause problems.

A three-column layout using CSS is quite hard. Have a look at [http://www.glish.com/css/7.asp]

Anthony Williams
+6  A: 

If you haven't already checked out A List Apart you should, as it contains some excellent tutorials and guidelines for website design.

This article in particular should help you out.

Josh
A: 

Here is a good place to get not only 3 column layouts but certainly more. You will certainly find it useful.

Steve Obbayi
+1  A: 

You may also find some help in the similar Stack Overflow question: three column web design with variable sides

davebug
+1  A: 

3-column "holy grail"

mrinject
A: 

By far the easiest way that I have found to do 3 columns (or any other number of columns split over the available space in weird ways) is YUI Grids. There is a YUI Grids Builder to give you the basic layout. The following will give you a 750px wide basic 3 column layout (split 1/3 1/3 1/3) with a 160px left sidebar. Changing it to to other widths, sidebar configs and column splits is really easy.

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2    "http://www.w3.org/TR/html4/strict.dtd"&gt; 
3   <html> 
4   <head> 
5      <title>YUI Base Page</title> 
6      <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7   </head> 
8   <body> 
9   <div id="doc" class="yui-t1"> 
10     <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11     <div id="bd"> 
12      <div id="yui-main"> 
13      <div class="yui-b">    <div class="yui-gb"> 
14          <div class="yui-u first"> 
15      <!-- YOUR DATA GOES HERE --> 
16              </div> 
17          <div class="yui-u"> 
18      <!-- YOUR DATA GOES HERE --> 
19              </div> 
20          <div class="yui-u"> 
21      <!-- YOUR DATA GOES HERE --> 
22              </div> 
23      </div> 
24  </div> 
25      </div> 
26      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
27       
28      </div> 
29     <div id="ft">Footer is here.</div> 
30  </div> 
31  </body> 
32  </html>
Peter Kelley
A: 

There are a number of examples and libraries out there you can search on - a couple already listed (A List Apart is a must read).

I've used the Yahoo User Interface Library (YUI) on my last couple of sites and really like it. Yahoo completely supports it and it's quick to understand and use. Here is there CSS for Grids, which allows you to format your page into as many columns and sections as you want.

YUI is nice because you don't have to reinvent the wheel for the foundation of your site, and they do all the work of making sure their foundations work across all browsers. And best of all, it's free.

Baer
+2  A: 

Give BluePrint CSS a try. It is really simple to get started with, yet powerful enough for most applications.

Easy to understand tutorials and examples. Has a typography library that produces decent results straight out of the box.

Mats Wiklander
A: 

I like 960 Grid System. It's a lightweight, easy to use css which devides the screen into 12 (or 16) columns. You can use it for a 3 column design and align the rest of your content accordingly.

sdfx
A: 

For fixed coloumn, just set height:xxxpx will make them equal.

Use this 3 column layout generator to try.

unigogo