Welcome to WebmasterWorld Guest from 54.226.25.231

Forum Moderators: not2easy

Message Too Old, No Replies

Achieving two instances of 100% DIV height?

     

Megalith

9:37 pm on Mar 27, 2007 (gmt 0)

5+ Year Member



I am currently using a layout that already has 100% DIV height in effect. Everything is in a wrapper, and the body will always touch the footer at the bottom of the page, and will expand if necessary.

However, I also have two floated DIVs in the body section. The problem is that I cannot figure out how to get the DIV on the right (a sidebar menu) to stretch all the way down and touch the footer. I would like to do this because I have applied a left border, which seperates the content between the body DIVs nicely. I need the border to hit the footer at the bottom of the page, however.

I had attempted to create another wrapper around the two DIVs in the body to force the height, but I had no luck.

The DIVs are sorted like this:

<container>
<menu>
<content>*floated
<sidebar>*floated
<breaker>
<footer>

SuzyUK

9:46 am on Mar 28, 2007 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



you can't get floated divs to inherit height, they are removed from the flow..

you can apply a background graphic to your container div 1px (or whatever border width) wide and repeating vertically which simulates your border, position it (using background: position) to the container so it appears visually between the two divs you would like to separate.. if you already have a background image on the container div insert an inner container (wrap in the pseudo example below)

<container>
<wrap>
<menu>
<content>*floated
<sidebar>*floated
<breaker>
</wrap>
</container>
<footer>

Suzy

 

Featured Threads

Hot Threads This Week

Hot Threads This Month