Question

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.

Was it helpful?

Solution

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.

OTHER TIPS

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.

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"> 
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> 

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.

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.

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

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

Use this 3 column layout generator to try.

This code work on my computer with IE 8, Chrome, Firefox.

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);">
        <a href="http://abv.bg"> Column1 </a> </div>
        <div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);">
        <font color="#FFFFFF">Column 2 </font> </div>
        <div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);">
        <a href="http://abv.bg"> Column 3 </a> </div>
    </body>
</html>

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]

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top