Layout

[ScottInTexas]

I have read some of the posts regarding layout and have even read the article about Liquid Layout, but nothing seems to put web site layout into a single neat package. So, what do you think about how to layout a webpage?

Say, for instance, that I use just divs. My CSS has classes which specify widths of 100% or 20% and 80%. But they won't layout in the manner which I want. Each div flows just below the last and in the 20 80 I want them side by side.

I want a layout that has a 100% wide header (wth a table and three cells), a 20% wide side bar that is 100% tall and along side that an 80% wide content area, finaly a 100% wide footer.

I have tried tables, spans and divs but making them work without padding and margins etc has been a hassel. Any thoughts and/or articles that address this issue?

Thanks again to all. This is by far the most helpful site on the internet. Hopefuilly I can contribute as well.

[allida77]

Something like this ?
http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html

You will need to make some adjustments but it should get you there.

[Catman]

First, if you're not floating the divs, you need to do so.

Second, aim at a total percent something less than 100 -- say 20% and 75%.

Third, the box model adds margins, borders and padding to the total width, so a div set at 100% will extend beyond the right edge of the window -- so you may want to play with those settings as well as the width to get the layout so it's what you're looking for.

[pardicity3]

Is this: http://www.mikesadventures.net/layouts/layout3/index.php?p=abt something like what you were looking for? I think it goes along with your description (100% header, body divided into two parts, 100% footer). If it is what you want and you would like a better description just ask!

P.S. I have been working on the page for just a few days and it has only been tested in IE 6 and Moz on windows 2k. I haven't really made sure it is perfect yet, but I think it works as a rough example.

[ScottInTexas]

Thank you all for your responses. Paradicity3 is very close to what I was looking for. I will have to look up Float - Originally posted by Catman
First, if you're not floating the divs, you need to do so.
- and see what's up with that.

Paradicity3 used float in the navigation div. I have some direction now. Onward and upward.

Thanks again,