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
ucsdmbdmAsked:
Who is Participating?
 
scrathcyboyConnect With a Mentor Commented:
For the inner DIV to take the entire height, you have to make all the container DIVs to the entire height.  SO you start at the top and work down --

HTML, BODY  { height:100%; min-height:100% }

DIV.main  { height:100%; min-height:100% }

DIV.inner  { height:100%; min-height:100% }

Now your inner DIV can do it, as long as the HTML, BODY and main page DIV also has this property.
0
 
SRigneyCommented:
I think this link has what you are looking for.

http://www.alistapart.com/articles/fauxcolumns/
0
 
spikeyman00Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.