ucsdmbdm
asked on
CSS, make inner div take the entire hight
Hi,
I have relatively new to div only design and was wondering how I can setup my css to have the inner div take the entire height the screen. I have the following basic div structure
<body>
<div class="wrapper">
<div id="header">.....
</div>
<div id="content>....
</div>
<div id="footer">......
</div>
</div>
</body>
My content does not have a height specified and has the following css property:
#content {
width:700px;
margin: 0 auto; /*to bring it to the center of the page */
padding:20px;
background: url(images/img10.gif) repeat-y;
}
However, when I expand my page in the browser the gradient or image with repeat-y doesn't come all th way down to up to the footer in safari and in IE it continues all the way dows to the footer. take a look at the attached image and see the inner gradient doesn't go all the way down when I expand my page.
Picture-2.gif
I have relatively new to div only design and was wondering how I can setup my css to have the inner div take the entire height the screen. I have the following basic div structure
<body>
<div class="wrapper">
<div id="header">.....
</div>
<div id="content>....
</div>
<div id="footer">......
</div>
</div>
</body>
My content does not have a height specified and has the following css property:
#content {
width:700px;
margin: 0 auto; /*to bring it to the center of the page */
padding:20px;
background: url(images/img10.gif) repeat-y;
}
However, when I expand my page in the browser the gradient or image with repeat-y doesn't come all th way down to up to the footer in safari and in IE it continues all the way dows to the footer. take a look at the attached image and see the inner gradient doesn't go all the way down when I expand my page.
Picture-2.gif
Without seeing the rest of your css, I'm geussing you have'nt floated anything, if you did the footer would sit just under the content, without the huge gap.
Make sure you use floats. The only way to make your content fill the entire page is to either fill it with contnent, or set a height. After all how does it now how much of your bg to repeat withouth a height set n your container.
Add flost left to all your classes except your class with the margin auto. You will see how it is supposed to look and you can work from there, get the css correct first.
Make sure you use floats. The only way to make your content fill the entire page is to either fill it with contnent, or set a height. After all how does it now how much of your bg to repeat withouth a height set n your container.
Add flost left to all your classes except your class with the margin auto. You will see how it is supposed to look and you can work from there, get the css correct first.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://www.alistapart.com/articles/fauxcolumns/