Percentages on DIVs with Margins using CSS

[Seith]

Heya

I'm needing to arrange some DIVs using CSS, but I'm not familiar with %s and DIVs so excuse me if I seem ignorant to the proper methods.

This is something I'd be able to make no problem using tables, but I feel it should be done 'correctly'.

I plan to have a DIV positioned 100px from the top and 300px from the left. Which then needs to span down to the foot of the page (ie, the remaining size of 'body' - less the 100px)

ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo

so that when either the page is stretched by another DIV or by the content within the positioned DIV, it will remain in the same position with no scroll bars.

ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo
ooooooooooooooooooooooooooo

The problem I seem to face is, when I set the DIV as follows:

#body {
height:100%;
width:100%;
margin:none;
padding:none;
}
#global_container{
width:600px;
height:100%;
position:absolute;
margin-left:300px;
margin-top:100px;
background-color:#FC0;
}

It seems to 'make up for' the margin by adding it onto the bottom, and adding scroll bars. Effectively making it 100% [the height of Body] + 100px. I understand that the height is there-for relative to the height of body (100% of the browser's 'page area' pending resize of the window). But I would have thought this would be accommodated for by the margin.

Any help would be awesome. :)

This is one part, the very first DIV, of a larger page... this is what is stumping me. I don't understand how to nest DIVs correctly to ensure the relationships flow.

Thanks in advance,
Seith

[swa66]

try:

#global_container{
 position:absolute;
 width:600px;
 left:300px;
 top:100px;
 bottom:0;
 background-color:#FC0;
} 

IE6 will not like setting both top and bottom; use IE7.js to teach it some respect for standards.

[Seith]

That didn't work, any other ideas?

<=)