WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Need Div to Extend to footer

Reply
  Thread Tools Display Modes
Old 25th August 11, 07:18 PM   #1
mhoy09
WLC Member
 
Join Date: Aug 2011
Posts: 6
Default Need Div to Extend to footer

On our site http://www.saguaroscuba.com/blog

The #content and #sidebar sometimes do not go all the way down to the #footer. I want #sidebar to expand all the way down if #content is long and vice versa. Hard to explain, but you can see that #wrapper has a black background and if the sidebar/content divs don't extend all the way to footer they show black. Here is my CSS:

PHP Code:
#content {
    
background#ffffff;
    
floatright;
    
width75%;
    
/*height: 100%; Tried this, no help*/

PHP Code:
#sidebar {
    
font-familyarial;
    
font-size12px;
    
background#ffffff;
    
floatleft;
    
width25%;
    list-
style-typenone;
    
/*height: 100%; Tried this, no help*/
    
text-indent10px;

mhoy09 is offline   Reply With Quote
Old 25th August 11, 08:17 PM   #2
rkrause
WLC Mod
 
Join Date: Sep 2009
Posts: 893
Default Re: Need Div to Extend to footer

adding overflow:hidden; to the sidebar should accomplish this.

Ryan
rkrause is offline   Reply With Quote
Old 25th August 11, 08:20 PM   #3
mhoy09
WLC Member
 
Join Date: Aug 2011
Posts: 6
Default Re: Need Div to Extend to footer

Quote:
Originally Posted by rkrause View Post
adding overflow:hidden; to the sidebar should accomplish this.

Ryan
Just tried that. I still see a black area under the sidebar.
mhoy09 is offline   Reply With Quote
Old 26th August 11, 08:47 AM   #4
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Need Div to Extend to footer

That's how HTML/CSS rendering works. An elements length is pushed by it's content and childe elements, not "pulled" by it's parent or neighbouring elemennts.

You have to give an explicit height to the parent and 100% height to the child or fake it as in "faux columns" (Google it) or use javascript to equalise the containers or try this
chrishirst is offline   Reply With Quote
Old 26th August 11, 07:52 PM   #5
mhoy09
WLC Member
 
Join Date: Aug 2011
Posts: 6
Default Re: Need Div to Extend to footer

Thanks for the info, while trying to apply the fix I stumbled across a fix for it. My body background was black AND my wrapper background was black. I changed wrapper to white and it all looks correct now.
mhoy09 is offline   Reply With Quote
Old 26th August 11, 10:15 PM   #6
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Need Div to Extend to footer

And sometimes you just have to fake it
chrishirst is offline   Reply With Quote
Old 27th August 11, 01:49 PM   #7
LearningCoder
WLC Lover
 
LearningCoder's Avatar
 
Join Date: Jan 2011
Location: England
Posts: 115
Default Re: Need Div to Extend to footer

Isn't using '%' for setting a height in CSS wrong? Everytime I try setting a div's height with CSS using '%', it never works, so I resort to pixels.

any feedback from the vets?
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
LearningCoder is offline   Reply With Quote
Old 27th August 11, 04:10 PM   #8
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Need Div to Extend to footer

to use a % height the parent container must have an explicit height set.
chrishirst is offline   Reply With Quote
Old 27th August 11, 07:57 PM   #9
LearningCoder
WLC Lover
 
LearningCoder's Avatar
 
Join Date: Jan 2011
Location: England
Posts: 115
Default Re: Need Div to Extend to footer

What does that mean?
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
LearningCoder is offline   Reply With Quote
Old 27th August 11, 09:55 PM   #10
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Need Div to Extend to footer

before the rendering engine can calculate a height as a percentage of the parent it HAS to know what the parent height actually is.
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:35 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.