homepage Welcome to WebmasterWorld Guest from 54.237.38.30
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Achieving two instances of 100% DIV height?
Megalith

5+ Year Member



 
Msg#: 3294788 posted 9:37 pm on Mar 27, 2007 (gmt 0)

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

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



 
Msg#: 3294788 posted 9:46 am on Mar 28, 2007 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved