3 column layour help

[nkaisare]

I want to create a 3-column layout, similar to the one in the tutorial at http://www.glish.com/css/2.asp

I have a header and footer which should cover the browser width. In the main contents, I have left links, right links and central contents area.

Left and right links are 150px width. Main contents should flow appropriately according to the width of the browser window.

The url for the content layout I am looking for is:
http://www.prism.gatech.edu/~gte207x/vibha03web/volunteer/

For this page, CSS is:

#workspace {position: relative; margin: 5px 10%; padding: 0; width: auto}

#leftlinks {position: absolute; top: 0; left: 0; width: 150px; margin: 0; padding: 0}

div#leftlinks img {display: block; border: 0; margin: 0; padding: 0}

#rightcol {position: absolute; top: 0; right: 0; width: 200px; margin: 0; padding: 0}

#contents {position: relative; top: 0; margin-left: 155px; margin-right: 205px; padding: 0; width: auto}


The html is

<div id="workspace">
<!-- Here is the header -->
</div>

<div id="workspace">
<div id="contents">
<!-- Main page contents -->
</div>
<div id="rightcol">
<!-- Right column contents -->
</div>
<div id="leftlinks">
<!-- Left links -->
</div>
</div>

<div id="workspace">
<!-- Footer Information -->
</div>


The problem is that the page works fine if contents are longer than left links. However, left links are longer, then the footer gets displayed over the left links.

Another problem is that IE gives 10% margin to the main contents, while the left links are to the left edge. So also right column.

I thought of using {float} for left and right columns. But that would mean I have to place the <div id="leftlinks"> and <div id="rightcol"> above the main contents. I dont want to do that because in non-visual browsers (eg. lynx) I want contents to be displayed above the links.

Any ideas guys?

[Stefan]

First I must point out that your examplecode here has id="workspace" no less then 3 times. You are only alowed to have 1 single instance of an ID on a page. For multiple targeting use class=""

Anyway, I would do something like this


<div>
<!-- Here is the header -->
</div>

<div id="workspace">
<div id="leftlinks">
<a id="skiplink" href="#contents">Skip to contents</a>
<!-- Left links -->
</div>
<div id="rightcol">
<!-- Right column contents -->
</div>
<div id="contents">
<!-- Main page contents -->
</div>
</div>

<div style="clear:both;">
<!-- Footer Information -->
</div>


---------
<style media="screen" type="text/css">
#skiplink {display:none;}

#leftlinks {float:left; width:150px;}
#rightcol {float:right; width:150px;}
</style>

[nkaisare]

Originally posted by Stefan
<a id="skiplink" href="#contents">Skip to contents</a>
[/B]
Hmmm thats a good idea.


Originally posted by Stefan
First I must point out that your examplecode here has id="workspace" no less then 3 times. You are only alowed to have 1 single instance of an ID on a page. For multiple targeting use class=""
Oh, my error.

Thanks
Niket