0

I am new to coding and have a small problem I can't figure out. I have a #wrapper div defined to allow me to center my content on the page and color the background white (background color defined in css). Whenever I have the height property set to auto, I have a white box at the top of my page when rendered which seems to represent the padding definitions I have set in the #wrapper properties. My actual page height is fine when rendered meaning that all the content appears as expected, but the only way to make the white box extend to the bottom of the page so the whole background is white is to enter a fixed height value. Here's what I have:

#wrapper {
     width: 940px;
     height: auto;


    /* border-top: 1px solid #000000;
     border-right: 1px solid #000000;
     border-bottom: 1px solid #000000;
     border-left: 1px solid #000000; */

     margin-left: auto;
     margin-right: auto;
     margin-top: 10px;
     margin-bottom: 10px;

     padding-top: 10px;
     padding-right: 20px;
     padding-bottom: 10px;
     padding-left: 20px;

     position: relative      
}

Any help is surely appreciated!

Pete
  • 57,112
  • 28
  • 117
  • 166
Michele Hermes
  • 1
  • 1
  • 1
  • possible duplicate of [How come my float elements aren't within their parent](http://stackoverflow.com/questions/4631540/how-come-my-float-elements-arent-within-their-parent) – Quentin Mar 26 '13 at 14:16
  • Well, auto means auto – only as high as the actual content requires it to be. – CBroe Mar 26 '13 at 14:16
  • could you post your html too or create a http://www.jsfiddle.net – Pete Mar 26 '13 at 14:21

2 Answers2

0
#wrapper {overflow: hidden}

OR

#wrapper {overflow: auto}
isherwood
  • 58,414
  • 16
  • 114
  • 157
0

If you want the #wrapper div to extend to the bottom of the page you need to provide an explicit height. height: auto will adjust to fit the content only. If #wrapper is a direct child of your main page div or just below your body you can set that parent element (body or some div) to something like 100% or a static value and then set your #wrapper to a percentage of that value like...

I am NOT advocating inline styles!! just an example

<body style="height: 480px">
    <div id="wrapper" style="height: 95%">
        content!
    </div>
</body>

Body could also be a percentage and would then adjust to the window height, might work but is probably not what you want, just another option.