CODEWITHSUNDEEP
csshtml
anon
anon

Reputation:

Need help trying to figure how to cear my divs and make page scale to 100%

can someone look at my css and tell me why I can't get my container div to wrap around my other divs? I have set the height to 100% and would like to get the container div to be 100% of the screen. I tried the clearfix method with no luck as well as a few other methods that I found on SO. Any help would be much appreciated.

<html>
<body>
<div class="container ">
        <div class="header">
        </div>
        <div class="mainContent">
        </div>
        <div class="other">
        </div>
</div>
</body>
</html>



body{
    font-size: 100%;
    width:96%;
    max-width: 960px;
    margin: auto;
    background-color: gray;
}

.container
{
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: auto;
    padding: 1.041666666%;
    background-color: white;
}

.header{
    position: relative;
    width: 100%;
    height: 70px;
    margin: auto;
    background-color: blue;
}

.mainContent{
    position: relative;
    float: left;
    margin-top: 1.041666666%;
    width: 62.5%;
    height: 100%;
    background-color: red;
}


.other{
    position: relative;
    float: left;
    margin: 10px 0 0 1.041666666%;
    width: 36.458333333%;
    height: 100%;
    background-color: green;
}

.clearfix {
    clear: both;
}

Upvotes: 0

Views: 78

Answers (3)

T J
T J

Reputation: 43166

add the following to your css

check this FIDDLE

html,body{
height:100%;
}
.content{
height: 100%; // calc(100% - 2 x padding);
}

For using height in %, the parent elements should also have their height set (in this case html and body).

You can calculate the exact height using css calc() for maincontent and other function as follows:

height: calc(100% - (70px  + total height for margins and paddings) )

Upvotes: 1

Leann
Leann

Reputation: 216

John, try this. It's the best solution I've ever found for the children floating, disappearing parent problem.

<div class="container ">
    <div class="header">
    </div>
    <div class="mainContent">
    </div>
    <div class="other">
    </div>
    <div class="clearfix"><!--CLEAR--></div>
</div>

.clearfix {
     clear: both;
     display: block;
}

Upvotes: 0

Farnabaz
Farnabaz

Reputation: 4066

since you are using float for inner divs, you can add overflow:hidden to container to fix container hight

.container
{
    position: relative;
    overflow:hidden;
    width: 100%;
    max-width: 960px;
    margin: auto;
    padding: 1.041666666%;
    background-color: white;
}

Upvotes: 0

Related Questions