Extending a Left Nav Bar using CSS

[smsinger3]

Hello All. I have a CSS question. I have page that I want to look like this.

------------------------------------------
Header
------------------------------------------
|
NavBar | Main Body
only | ... lots and and lots of stuff
a | ... fills about 3 full screens
few |
lines |


The NavBar only extends to the end of the first screen; however, I need it to extend to the end of the main body. How can I do that? I have been using "Height: 100%" but that is only for the screen. Any ideas how I can do this? Here is my code:

<div id=divHeader>..header html..</div>
<div id=divLeftNavBar style=&quot;position: relative; CLEAR: left; DISPLAY: inline; FLOAT: left; WIDTH: 15%; HEIGHT: 100%&quot;>...Left Nav HTML...It's just a few lines</div>
<div id=divMainBody style=&quot;DISPLAY: inline;&quot;>
The main body html..It fills about 3 full screens.
</div

Thank you very much for your help!

SteveS
smsinger3@yahoo.com

 

[MrBelfry]

Divs only expand vertically as it's contents allows so you have to fake the effect.

You could put alot of <br> tags in there to expand the div or completely fake it like i have done.

I did it one way at

http://www.mrbelfry.co.uk.

I have a div that contains the 2 central columns. The parent div has its background colour set to the same colour as the smallest column (in my case the right hand side) so that when the right div ends the background-color of the parent div shows through.

I've done it another way at new.lighthousecc.co.uk where the background of the columns is all one image. I could explina how i did it or refer you to

http://www.alistapart.com/articles/fauxcolumns/

where I saw the idea.

MrBelfry

http://www.mrbelfry.co.uk

http://www.lighthousecc.co.uk

 

[stormbind]

It's something like this. I hope it's correct but if not you can find this and much more on MSDN. It is definately possible.

<div id=navBar style=&quot;height:expression('document.body.offsetHeight');&quot;></div>

----------
I'm willing to trade custom scripts for... [see profile]