CODEWITHSUNDEEP
csshtmldom
Nikhil G
Nikhil G

Reputation: 1594

Setting height of web page automatically

I am working on a web-application, there are many static page and dynamic pages as well. So I want to set their height as per the content. To do this is I have simply created an outer div where I have given styles related to container only. This is as following

.mainbox
{
    margin-left:auto;
    margin-right:auto;
    width:80%; 
}

and in the next selector I have specified a fixed height that helps me to extend the background area upto the content of my home page. But that doesn't solve my purpose. It is as following.

.mbstyles
{
    margin-top:0; height:800px; background-color:#FCFAE6 
}

Now when I browse other static/dynamic web-pages as per the content either there is much empty back ground space or all space have consumed. Please suggest what more should I do to manage this height according to the content.

Thanks!!

Upvotes: 0

Views: 90

Answers (1)

MicroParsec
MicroParsec

Reputation: 229

Are you using floating divs? If so, remove the height:800px; and try adding the following to the end of the container:

<div class="mainbox">
    // all of your content

    //important new part:
    <div class="breaker"></div>
</div>

And to your css add:

div.breaker
{
    float:none;
    clear:both;
}

Floating content does not contribute to the height of their parent element (for some reason). The clear:both instruction in the breaker makes sure that the div is rendered after all the floating content, and it does not take part in the "float-flow", so to say, and even breaks the float-flow in such a way that floated divs after the breaker are in a new chain that is displayed after/under the breaker. Because the breaker is displayed under the floating divs, but is not a floating div itself, the container needs to stretch to fit its content, which is what we want!

I hope this helps!

Upvotes: 2

Related Questions