Trouble converting froms table layout to CSS layout

[dptr1988]

Before I knew that laying out you website with tables was bad, I made a website that was layed out like [url=http://dptr1988.mooo.com/test/layout.png]this[/url] with tables. But now I'm trying to use CSS for the layout and don't know how to make the layout without using absolute positioning. Could I make the whole layout with relative position only?. Am I wrong in wanting to avoid absolute positioning? Do you have any suggestions on how to layout my website like [url=http://dptr1988.mooo.com/test/layout.png]this[/url] using CSS?

[url=http://dptr1988.mooo.com/test/]Current HTML[/url]
[url=http://dptr1988.mooo.com/test/style.css]Current CSS[/url]

Thanks

[moberemk]

Two links for you:
http://www.bluerobot.com/web/layouts/
http://www.alistapart.com/articles/holygrail/

[dptr1988]

Thank you!

I had googled for CSS layouts and even read some articals www.alistapart.com but had missed the one that you gave me.

[killerb]

It is a long road to mastering css. You have a simple 3-column layout (which is simple in table layouts)


---------------------------------------------
|                        |                                  |
------------------|                                  |
|                        |                                  |
---------------------------------------------
|              |                              |              |
|              |                              |              |
|              |                              |              |
|              |                              |              |
|              |                              |              |
----------------------------------------------
----------------------------------------------


You want to use relative positioning as much as possible.

[code]
<style>
div{border:solid 1px #333;}*/Delete this, only used for seeing the layers/*

#pageBanner{position:relative;height:120px;}
#leftCol{width:20%;float:left;}
#main{width:60%;float:left;}
#rightCol{width:20%;float:right;}
#pageFooter{height:26px;}

.clear{clear:both;height:0px;font-size:0px;}
#leftCol, #main, #rightCol{margin:0;padding:0;}
</style>
[/code]

[code]
<div id="pageBanner">
<div style="position:relative;float:left;width:60%">
<div></div>
<div></div>
</div>
<div style="position:relative;float:right;width:39%">

</div>
<div class="clear"></div>
</div><!--end pageHeader-->

<div id="leftCol"></div>
<div id="main"></div>
<div id="rightCol"></div>

<div class="clear"></div>
<div id="footer"></div>
[/code]

Use these layers to lay out the page.
Nest everything inside these layers with div,p,blockquote tags, etc.
Don't put anything in the clearing divs.
Don't put anything outside the divs (straight into the body).
Check out [url=http://www.freewebs.com/good-code]custom CSS borders using auto-nested divs and repeating background images[/url]
Persist with CSS, tables are an ugly way to code!

[killerb]

Or you can use absolute positioning for the side cols:

replace the css for the left,right and main cols in the above example, with this:

[code]
#leftCol,#rightCol{position:absolute;top:120px;width:180px;}
#rightCol{right:0;}
#leftCol{left:0;}
#main{margin:0 180px;}
[/code]

[AndyB]

Avoid absolute positioning. Avoid relative positioning. Neither is needed in anything but extraordinarily complex layouts.  Take a look at Moberemk's links (or google CSS layouts and you'll find zillions).

http://www.inknoise.com/experimental/layoutomatic.php - that'll even write it for you.