CODEWITHSUNDEEP
css
Sackling
Sackling

Reputation: 1820

why can't i get this div to go 100% height

I have a div that is wrapped in a few other divs that are all 100%. I have it this way because I have an outer div with a slight border image that I want wrapped around the entire page.

HTML:

<body>
<div class="container" >
    <div style="padding-top:15px; height:100%;">
        <div class="wrapper">
            <div class="contentContainer">
            test
            </div>
        </div>
    </div>
</div>
</body>

CSS:

*{margin:0; padding:0;}
body { margin: 0 auto; color: #333333;  }
html, body {  color: #000000;  margin:0;  padding:0;  height:100%; }

.wrapper {width:940px; margin-left:20px; margin-right:20px; background:#fff; overflow:hidden; margin:0 auto; height:100%;}

.container {min-height:100%;  height: auto !important; height:100%;  margin: 0 auto -30px;  width:980px; background:URL(images/bg_sides.jpg) repeat-y #f4f4f4;}

.contentContainer {width:920px; margin:0 auto; height:100%; }

Fiddle: http://jsfiddle.net/hc3Xu/2/

Upvotes: 3

Views: 145

Answers (3)

Ross Smith
Ross Smith

Reputation: 755

.container has height: auto !important and height: 100%. The !important rule is overriding. Remove it and you're fine.

Upvotes: 0

Wes Pearce
Wes Pearce

Reputation: 259

The height: auto !important rule in .container is the culprit.

Upvotes: 3

welldan97
welldan97

Reputation: 3086

Hope this is what you want: http://jsfiddle.net/c3Lxg/

I've removed height: auto !important from .container which overrided other heights.

Upvotes: 2

Related Questions