div expanding 100%

[dtm32236]

hi,

i posted something about this a few days ago, but i can't find the thread in my User CP.... I can't find it anywhere.

on this page:
http://www.foremostgroups.com/dev/2007corporate/products/K&B/index.html

I'm trying to make the left navigation to expand the whole page.

Here's the CSS for the page:
http://www.foremostgroups.com/dev/2007corporate/products/includes/products_style.css

and CSS for the left navigation:
http://www.foremostgroups.com/dev/2007corporate/products//includes/SpryMenuBarVertical.css

I don't know how to do this - I've tried everything and I'm out of ideas.

PS - In the main css (products_style.css) I have min-height:400px; height:auto !important; height:400px; in #main_content... this is just a IE6 hack for min-height.

Please shoot any ideas at me... I'm at a loss here.

[curious_george]

What exactly do you mean by "expand the whole page"?

[dtm32236]

i want the height of the nav_links div to stretch the entire height of the main_content div. does that make sense?

[WebJoel]

<!-- MAIN CONTENT -->
<div id="main_content" style="position:relative;background-color:#f2f6fa;">

<!-- LEFT NAVIGATION -->
<div id="left_nav" style="position:absolute; left:0; border-right:0 none; z-index:500;">

<ul id="MenuBar_heritage_bath" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Heritage Bath Collection</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Bath Furniture</a>
<ul>
<li><a href="#">Bastille</a></li>
<li><a href="#">Bellani</a></li>

<li><a href="#">Berkshire</a></li>
<li><a href="#">Corsica</a></li>
<li><a href="heritage_bath/delaware/">Delaware</a></li>
<li><a href="#">Hawthorne</a></li>
<li><a href="#">Juliet</a></li>
<li><a href="#">Laguna</a></li>

<li><a href="#">Northern Lights</a></li>
<li><a href="#">Palermo</a></li>
<li><a href="#">Tuscanny</a></li>
<li><a href="#">Urban</a></li>
<li><a href="#">Winchester</a></li>
<li><a href="#">Wingate</a></li>

<li><a href="heritage_bath/yorktown/">Yorktown</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Natural Stone Tops</a>
<ul>
<li><a href="#">Carrara White</a></li>
<li><a href="#">Dark Emperador</a></li>

<li><a href="#">Glacier Blue</a></li>
<li><a href="#">Mohave Beige</a></li>
<li><a href="#">Rushmore Grey</a></li>
<li><a href="#">Sierra Ash</a></li>
<li><a href="#">Tuxedo Black</a></li>
<li><a href="#">Ubatuba</a></li>

</ul>
</li>
</ul>
</li>
</ul>
<ul id="MenuBar_rta_bath" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">RTA Bath Furniture</a>
<ul>

<li><a href="#">Ambassador</a></li>
<li><a href="#">Diplomat</a></li>
<li><a href="#">Heartland</a></li>
<li><a href="#">Laurel</a></li>
<li><a href="#">Newport</a></li>
<li><a href="#">Oxford</a></li>

<li><a href="#">Presidential</a></li>
</ul>
</li>
</ul>
<ul id="MenuBar_cultured_marble_tops" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Cultured Marble Tops</a>
<ul>
<li><a href="#">Bastille</a></li>

</ul>
</li>
</ul>
<ul id="MenuBar_toilet_seats" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Toilet Seats</a>
<ul>
<li><a href="#">Bastille</a></li>
</ul>

</li>
</ul>
<ul id="MenuBar_bath_accessories" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Bath Accessories</a>
<ul>
<li><a href="#">Bastille</a></li>
</ul>
</li>

</ul>
<ul id="MenuBar_vitreous_china" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Vitreous China</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">All-in-One Toilets</a>
<ul>
<li><a href="#">Bastille</a></li>

</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">One-Piece Toilets</a>
<ul>
<li><a href="#">Bastille</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Two-Piece Toilets</a>

<ul>
<li><a href="#">Bastille</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="#">Pedistal Lavatories</a>
<ul>
<li><a href="#">Bastille</a></li>

</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- END LEFT NAVIGATION -->

<!-- PRODUCT DETAILS -->
<div style="position:relative; width:554px; padding:15px 10px; height:auto; border-left:1px solid #c2d1d7; margin-left:175px; background-color:white;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

</div> See if this helps. Not too elegant, and requires that the 'white background' content area be filled with content (can be fixed however, to have white bg without having to fill vertically 100%).
Just a quick-fix solution..

[dtm32236]

nice, WebJoel.... i like it.

i'd hate to tell you that in the mean time, I decided to bail on that whole concept and just went with no background with a blue border

http://www.foremostgroups.com/dev/2007corporate/products/K&B/heritage_bath/delaware/index.html

i think that it works just the same.

[dtm32236]

thanks so much guys. as always, I really appreciate your help.

i love this site.

[WebJoel]

nice, WebJoel.... i like it.

i'd hate to tell you that in the mean time, I decided to bail on that whole concept and just went with no background with a blue border

http://www.foremostgroups.com/dev/2007corporate/products/K&B/heritage_bath/delaware/index.html

i think that it works just the same. I realized that when, -after supper I looked again at my 'offline version' and saw this big white 'area' as if the navigation had lost it's background-color (had it had been changed via the external CSS). Checking here and your URL, yes, -that is what I have on my desktop now.
That page actually does look a bit 'cleaner' somehow...

[dtm32236]

That page actually does look a bit 'cleaner' somehow...

Thanks... and sorry for wasting your time writing that code (which I did try - and it worked perfectly). But i'm going to stick with the white-background links, I think it looks a little nicer.

Thanks again guys.

[WebJoel]

No problem, -only took about a half hour of tweaking it while dividing my attentions to playing a throw-catch nerfball game with my son... :D