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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
scrathcyboyCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.