CSS Layout Problem

[RogerZF]

So I've got most of my CSS layout done.

The problem is that I want my layout to be resolution-dependent so I want the DIV element that houses my content to stretch to consume the remainder of the screen (normally, in HTML, this would be table width="100%" height="100%").

However, if I use div style="width:100%;", then it makes the width the entire size of the screen and not the remainder of the screen. For instance, if I have a navigation bar and content. The navigation bar is 100 pixels. The screen resolution is 800x600. The content SHOULD be 700 pixels as that would be the remainder of the screen space left, but instead, it's 800 pixels.

I know you can solve this by using a container. The problem is I want my content to be at the TOP of my code for SEO purposes. Is there a way to specify a container without actually placing the DIV inside the container? I think that should solve the problem.

[cmarshall]

I use margins for this:

<div id="screen" width="100%">
<div id="navbar" style="float:left;background-color:red;width:100px">NAV</div>
<div id="content" style="background-color:yellow;margin-right:0px">CONTENT</div>
</div>

[cmarshall]

I made a boo-boo in my CSS.

I think this is more apropos:

<div id="screen" style="width:100%;top:0px;left:0px;position:absolute">
<div id="content" style="background-color:yellow;top:0px;margin-left:104px;margin-right:0px;padding-left:4px">CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT</div>
<div id="navbar" style="background-color:red;color:white;padding:0px;padding-left:4px;width:100px;top:0px;left:0px;position:absolute">NAV<br />NAV<br />NAV<br />NAV<br />NAV<br />NAV<br />NAV</div>
</div>

WARNING: I pulled this code from my nether regions, and spent about five minutes testing it on Firefox (Mac)! I give no guarantees that it will behave well on any other browser!

[RogerZF]

Thanks! It works great!