CSS: Position layers

[Ola]

Hi, I need some advice on the CSS layout of my site. The page structure and the order they appear on the page looks like this, simplified:

[header]
[top menu]
[content]
[bottom menu]
[copyright notice][site credits]

Each one of the elements has its on <div>.

The objective: I want to be able to allow the [content] layer to grow without overlapping the [bottom menu],[copyright notice] and [site credits] layers.

Each page in the site has different amount of content that needs to be contained within the [content] layer. However, I would like to be able to use only one <div> for the [content] layer throughout the site. The layers[bottom menu], [copyright notice] and [site credits] needs to be positioned relative to the [content] layer.

Initially I positioned all the layers using absolute positioning but then I realized that I can't keep the content to the same amount on every page! -

How should I structure the positioning of the above layers to do this?

Many thanks
Ola

[Costin Trifan]

before I'll go further, I have a small innocent question: "Why don't you use a table?".

About your code, as you don't need to use floating or relative positioning, just set up a fixed with (if you'd like) of your main layout container and the rest of the inner containers (like header, menu, content...) set up to a 100% width.

I think that'll be all...

[Ola]

yes, you are right. It might be the easiest. I have been so determined to only use CSS on this site that I had ruled it out but I suppose a table has its place!