homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

100% height div positioning

 5:00 pm on Apr 3, 2009 (gmt 0)

I'm having trouble with something that seems pretty simple. I have a div that is 100% height, and it works fine except that since it is absolutely positioned down, it is pushing the parent container down too. Basically it is getting its height from the parent and then adding space because of the positioning...

Here's the css:

body, html {height:100%}
#container {width:800px; height:100%; min-height:100%; margin: 0 auto; position: relative; background-color:#fff;}
#sidebar {height:100%; width:277px; position:absolute; top:157px; left:523px}

and the basic html:
<div id="container">
<div id="sidebar"></div>

is there a simple solution to this? Sidebar needs to get its height from container (as far as I can tell) but also needs to be positioned within the container.




 12:50 am on Apr 4, 2009 (gmt 0)

- removing the height: 100% from the #container
- removing the height: 100% from the #sidebar
- add bottom:0 to sidebar

This won't work in legacy IE versions natively (it lacks support for settign both top and bottom at the same time, but e.g. IE7.js fixes it.


 2:00 am on Apr 4, 2009 (gmt 0)

hmm that works... I guess sidebar is stretching the container as well so I don't need the height declaration there anymore.

but no luck for older browsers, huh? it doesn't even work in IE7? bummer.

I did find a workaround... instead of setting top I added a freaking spacer.gif. oh the shame! curse you IE for making me add 4k to my site! >:(


 4:11 pm on Apr 4, 2009 (gmt 0)

ran into another problem. if the content in a div inside the container is more than 100% height, the container doesn't stretch with it. so my white bg is gone and everything looks funky when you scroll down.

content div has css like this: #words {height:auto; width:425px; position:absolute; top:256px; left:86px;}

is there a way to make the container div 100% height and also stretch as needed?


 9:05 pm on Apr 4, 2009 (gmt 0)



 9:08 pm on Apr 4, 2009 (gmt 0)

You cannot stretch your container with absolutely positioned elements.

Absolute positioning removes the element from the flow, it will not affect how its parent nor its siblings are displayed.

I have the impression you use a bit too much absolute positioning (it works and you can do various things with it, don't get discouraged from using it, but for creating columns that stretch a parent, it's just not the right choice.

Instead I'd add a column, float it to one side and make sure the parent "clears" it (either with a clearfix, or either with an element that has the clear property. That should stretch your element.

min-height: 100% can be used to make an element at least as high as it's direct parent, provided the parent has an explicitly set height (different from auto, which is the default) [So o get something at least as high as the viewport, you need:
- min-height: 100% on the element
- height: 100% on ALL parents (including html and body)
- the children of the element need to remain in the flow and need to be cleared if floated so they stretch the element as needed.

Take care with applying padding, margins and borders as they will be added to the 100%, creating elements that are larger than what you need.


 2:00 am on Apr 5, 2009 (gmt 0)


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