CODEWITHSUNDEEP
csshtmlheight
Shaun
Shaun

Reputation: 5531

html div height not including children divs

Im trying to make it so that I can have a background behind a few divs by putting them inside of another div. The problem is, the parent div isnt growing to the height of its children divs. Since the content of this site is going to be dynamic, I need the parent div to grow. I made a makeshift fix for it by placing a div below the three other divs and settings its clear property to both, but that just messes up spacing. Heres the code. 

<div id="content_container" style="clear:both;">
        <div id="container_left">
          <p>Left Container</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
      </div>
        <div id="main_body">
          <p>Main Bod adf adsf asdf asd asdf asd dadf asd asd y</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
        </div>
        <div id="container_right">
          <p>Right Container</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
        </div>

   </div>

And here is the css 

    /* CSS Document */
#container {
    margin:auto;
    background:#CFF
}
#body_container {
    width:1200px;
    margin:auto;
}
#header {
    background:#CCC;
    height:130px;
}
#main_header {
    width:700px;
    float:left;
}
#header_login {
    margin-top:10px;
    margin-right:10px;
    float:right;
    width:200px;
}
#header_login p {
    margin:0;
}
#top_nav {
    clear:both;
    background:#06F;
}
#container_left {
    float:left;
    width:130px;
}
#container_right {
    float:right;
    width:130px;
}
#main_body {
    margin-left:20px;
    width:900px;
    float:left;
}
#content_container {
    background:#FFF;
}
#footer {
    clear:both;
}

Upvotes: 1

Views: 2411

Answers (1)

Morgan Delaney
Morgan Delaney

Reputation: 2439

Take a look at this article on "How To Clear Floats Without Structural Markup". Then add the clearfix class to your #content_container div.

<style type="text/css">

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

Upvotes: 4

Related Questions