I want to create a 3-column layout, similar to the one in the tutorial at <!-- m --><a class="postlink" href="http://www.glish.com/css/2.asp">http://www.glish.com/css/2.asp</a><!-- m --><br />
<br />
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.<br />
<br />
Left and right links are 150px width. Main contents should flow appropriately according to the width of the browser window.<br />
<br />
The url for the content layout I am looking for is:<br />
<!-- m --><a class="postlink" href="http://www.prism.gatech.edu/~gte207x/vibha03web/volunteer/">http://www.prism.gatech.edu/~gte207x/vi ... volunteer/</a><!-- m --><br />
<br />
For this page, CSS is:<br />
<br />
#workspace {position: relative; margin: 5px 10%; padding: 0; width: auto}<br />
<br />
#leftlinks {position: absolute; top: 0; left: 0; width: 150px; margin: 0; padding: 0}<br />
<br />
div#leftlinks img {display: block; border: 0; margin: 0; padding: 0}<br />
<br />
#rightcol {position: absolute; top: 0; right: 0; width: 200px; margin: 0; padding: 0}<br />
<br />
#contents {position: relative; top: 0; margin-left: 155px; margin-right: 205px; padding: 0; width: auto}<br />
<br />
<br />
The html is<br />
<br />
<div id="workspace"><br />
<!-- Here is the header --><br />
</div><br />
<br />
<div id="workspace"><br />
<div id="contents"><br />
<!-- Main page contents --><br />
</div><br />
<div id="rightcol"><br />
<!-- Right column contents --><br />
</div><br />
<div id="leftlinks"><br />
<!-- Left links --><br />
</div><br />
</div><br />
<br />
<div id="workspace"><br />
<!-- Footer Information --><br />
</div><br />
<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
Any ideas guys?<!--content-->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=""<br />
<br />
Anyway, I would do something like this<br />
<br />
<br />
<div><br />
<!-- Here is the header --><br />
</div><br />
<br />
<div id="workspace"><br />
<div id="leftlinks"><br />
<a id="skiplink" href=http://www.webdeveloper.com/forum/archive/index.php/"#contents">Skip to contents</a><br />
<!-- Left links --><br />
</div><br />
<div id="rightcol"><br />
<!-- Right column contents --><br />
</div><br />
<div id="contents"><br />
<!-- Main page contents --><br />
</div><br />
</div><br />
<br />
<div style="clear:both;"><br />
<!-- Footer Information --><br />
</div><br />
<br />
<br />
---------<br />
<style media="screen" type="text/css"><br />
#skiplink {display:none;}<br />
<br />
#leftlinks {float:left; width:150px;} <br />
#rightcol {float:right; width:150px;} <br />
</style><!--content-->Originally posted by Stefan <br />
<a id="skiplink" href=http://www.webdeveloper.com/forum/archive/index.php/"#contents">Skip to contents</a><br />
[/B] <br />
Hmmm thats a good idea.<br />
<br />
<br />
Originally posted by Stefan <br />
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="" <br />
Oh, my error.<br />
<br />
Thanks<br />
Niket<!--content-->
<br />
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.<br />
<br />
Left and right links are 150px width. Main contents should flow appropriately according to the width of the browser window.<br />
<br />
The url for the content layout I am looking for is:<br />
<!-- m --><a class="postlink" href="http://www.prism.gatech.edu/~gte207x/vibha03web/volunteer/">http://www.prism.gatech.edu/~gte207x/vi ... volunteer/</a><!-- m --><br />
<br />
For this page, CSS is:<br />
<br />
#workspace {position: relative; margin: 5px 10%; padding: 0; width: auto}<br />
<br />
#leftlinks {position: absolute; top: 0; left: 0; width: 150px; margin: 0; padding: 0}<br />
<br />
div#leftlinks img {display: block; border: 0; margin: 0; padding: 0}<br />
<br />
#rightcol {position: absolute; top: 0; right: 0; width: 200px; margin: 0; padding: 0}<br />
<br />
#contents {position: relative; top: 0; margin-left: 155px; margin-right: 205px; padding: 0; width: auto}<br />
<br />
<br />
The html is<br />
<br />
<div id="workspace"><br />
<!-- Here is the header --><br />
</div><br />
<br />
<div id="workspace"><br />
<div id="contents"><br />
<!-- Main page contents --><br />
</div><br />
<div id="rightcol"><br />
<!-- Right column contents --><br />
</div><br />
<div id="leftlinks"><br />
<!-- Left links --><br />
</div><br />
</div><br />
<br />
<div id="workspace"><br />
<!-- Footer Information --><br />
</div><br />
<br />
<br />
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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
Any ideas guys?<!--content-->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=""<br />
<br />
Anyway, I would do something like this<br />
<br />
<br />
<div><br />
<!-- Here is the header --><br />
</div><br />
<br />
<div id="workspace"><br />
<div id="leftlinks"><br />
<a id="skiplink" href=http://www.webdeveloper.com/forum/archive/index.php/"#contents">Skip to contents</a><br />
<!-- Left links --><br />
</div><br />
<div id="rightcol"><br />
<!-- Right column contents --><br />
</div><br />
<div id="contents"><br />
<!-- Main page contents --><br />
</div><br />
</div><br />
<br />
<div style="clear:both;"><br />
<!-- Footer Information --><br />
</div><br />
<br />
<br />
---------<br />
<style media="screen" type="text/css"><br />
#skiplink {display:none;}<br />
<br />
#leftlinks {float:left; width:150px;} <br />
#rightcol {float:right; width:150px;} <br />
</style><!--content-->Originally posted by Stefan <br />
<a id="skiplink" href=http://www.webdeveloper.com/forum/archive/index.php/"#contents">Skip to contents</a><br />
[/B] <br />
Hmmm thats a good idea.<br />
<br />
<br />
Originally posted by Stefan <br />
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="" <br />
Oh, my error.<br />
<br />
Thanks<br />
Niket<!--content-->