Question

So what I have is a container for my main area/body. Under that container is my footer container. What I want is that the body area resizes it’s height according to the content that has in it. Width has been specified. I can specify the height in pixels and it works. But when I put it to auto, the footer places itself above my body container. Can someone tell me what I’m doing wrong??

Html:

<div id="inventory"> <!-- BEGIN INVENTORY -->

<ul class= "inventory">
<li>About #  </li>
<li>### </li>
<li>==</li>

</ul>

</div> <!-- END INVENTORY -->

<div id="text"> <!-- BEGIN CONTENT TEXT -->

<h2> About </h2> <br/>

 This is content

</div> <!-- END CONTEXT TEXT -->

<div id="inventory_right"> <!-- BEGIN INVENTORY RIGHT -->

<p class= "inventory_right"> If you have any questions, please do not hesitate to    <br/> <a href= "#"> contact us </a> </p>

</div> <!-- END INVENTORY RIGHT -->

</div> <!-- END CONTENT -->

<div id="footer"> <!-- BEGIN FOOTER -->
<p class="copyright"> Copyright © 2012 | Philip </p>
</div> <!-- END FOOTER -->



</div> <!--END CONTAINER-->
</body>


</html>

css:

   #container {
        width: 1200px;
        margin: auto;
    }

    #content_other {


        width: 1200px;
        height: auto;

        }

    #inventory {

        background-image: url(../website/images/inventory.png);
        width: 154px; 
        height: 146px;
        margin-top: 80px;
        margin-left: 140px;
        float:left;
        display: block;

        }

   #inventory_right {

        background-image: url(../website/images/inventory.png);
        width: 154px; 
        height: 146px;
        margin-top: 80px;
        margin-right: 50px;
        float:right;
        display: block;

        }

    #text {

        float: left;
        border-style: solid;
        border-width: 0px;
        width: 600px;
        height: auto;
        margin-top: 80px;
        margin-left: 50px;
        }

    #footer {

        background-image: url(../website/images/footer.png);
        width: 1200px;
        height: 100px;

        }

Answer 1

Because you use float,give overflow property to your parent div ,or use clear:both

to your footer

  #footer
{
background-image: url(../website/images/footer.png);
width: 1200px;
height: 100px;
clear:both;
}

or

#container {
width: 1200px;
margin: auto;
overflow:hidden;
}