Box at Top & Bottom of the screen.

[flash37]

Hi, I am quite new to CSS and trying to create the following effect. I have a <div> that takes up the whole length of the screen. I then want to place two further <div>s inside this. One that sits at the top of the screen and one that sits at the bottom?

Can anyone help, it would be greatly appreciated.

[molendijk]

You mean something like(?):

<div id="div1" style="position:absolute; left:1px; top:1px; height:99.5%; width:250px; border: 1px solid red; background:#dedede"><a style="position:absolute; top:50%; left:220px">div1</a></div>

<div id="div2" style="position:absolute; top:0px;left:1px; height:200px; width:150px; border:1px solid yellow; background:white; z-index:1">&nbsp;&nbsp;div2</div>

<div id="div3" style="position:absolute; bottom:1px; left:1px; height:200px; width:150px; border:1px solid white; background:lightyellow; z-index:1"> &nbsp;&nbsp;div3</div>

(Put the styles in a stylesheet, if you prefer that).
----
Arie Molendijk.

[flash37]

Thanks for the reply.

How compatable is the z-index property with modern browsers?

Cheers.

[Medyman]

z-index will work in all browsers with CSS support.

But you don't need to use it in this instance. Nor do you need to use absolute positioning. I can see why Arie posted that it's a bit of overkill for what I think you need.

There are two ways to read your question:
1) That you want the header/footer to have a fixed position. This means that when you scroll the content, the middle div will scroll but the header/footer will remain in place.

2) That you want the header/footer to be above and below the middle div but within the flow. So if you scroll, the entire page scrolls (including the header and footer).

Which of these two are you going for? Arie's method does #2, though you don't need a lot of that CSS. To do the 1st, you have to use fixed positioning. Please confirm your goals and I'll help.