Jump to content

Why does my <div> have zero height?


Recommended Posts

I have built a few web sites in the past but I always used Dreamweaver to do most of the work for me. So now I am going back and forcing myself to learn the nitty, gritty details of what is really going on. I am also taking a basic course on WWW authoring with an instructor who has years of experience. I've run into a problem that my teacher can't answer and is practically "un-Google-able."


Why does <div id="middle_container"> in the following code have zero height?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  <title>The Utterly Unoriginal Sample Page</title>  <style  type="text/css">    body {        margin: 5px;        background-color: white;        font-family: Arial, Helvetica, sans-serif;    }    #main_container {        width: 800px;        margin: 5px;        clear: both;        background-color: lightgray;    }    #header {        width: 790px;        margin: 5px;        background-color: red;    }    #middle_container {        width: 770px;        margin: 5px;        clear: both;        background-color: black;        border-style: double;        border-width: 10px;        border-color: yellow;    }    #left_nav {        width: 100px;        margin: 0;        float: left;        background-color: lime;    }    #content  {        width: 670px;        /*width: 671px;*/            /*Forces content div down under left_nav.*/        margin: 0;        float: left;        background-color: cyan;    }    #footer {        width: 790px;        margin: 5px;        background-color: blue;        clear: both;    }  </style></head><body>  <div id="main_container">    <div id="header">      Header placeholder    </div>    <div id="middle_container">      <div id="left_nav">        Left Nav placeholder      </div>      <div id="content">        <p>Content placeholder</p>        <p>Content placeholder</p>        <p>Content placeholder</p>      </div>    </div>    <div id="footer">      Footer placeholder    </div>  </div></body>

I have posted this page at http://webtrain.austincc.edu/~grobertson/zero_height_div.html so you can more easily take a look at it and examine it in a DOM inspector. I have pared it down to the bare minimum to illustrate the problem. I have also used contrasting colors and given the middle_container div a double-line, yellow border to make it easier to see what is going on.


I have set the margins on the left_nav and content divs to zero, so you can see that their top edges align with the vertical center of middle_container. Because middle_container has zero height, one could also say those two divs are butting right up against the top edge of middle_container, just as they should.


If you look closely, the horizontal position and size of left_nav and content are still under the control of middle_container. They are shifted to the right by the 30-pixel-wide border of middle_container. Also, if I increase the width of either div then content gets shifted down below left_nav.


So, middle_container seems to be doing its job in the horizontal direction but completely falls down, vertically. (I'm sure there is some kind of joke in there somewhere.) Why is the height of middle_container not expanded to fit the contents of the divs inside it, while main_container does exactly what I expect?




P.S. Yes, I know I could solve the problem by giving everything a fixed height but I do not want to do that. That seems like a hack to get it to look "OK" without solving the problem and actually learning what is going on.

Link to comment
Share on other sites

It has zero height because the content inside it is floated. Floated elements are ignored when calculating the height of their parent.


This can be easily solved. Setting its overflow property to "hidden" will force it to wrap around floated elements.

  • Like 1
Link to comment
Share on other sites

Thank you, Ingolme. It worked like a charm. This doesn't seem to be too very intuitive. Is this something that is designed into HTML or is it just a workaround? If the former, do you know where I ould find a reference explaining why it works this way.



Edited by GrantRobertson
Link to comment
Share on other sites

I haven't found a good resource explaining why it works, but my guess is that the browser needs to take the floated content into account in order to determine what should and shouldn't show when there's an overflow.


There's a more complicated method you can use if your element has a fixed width or height and needs to show overflowing content. It's this clearfix: http://nicolasgallagher.com/micro-clearfix-hack/

I've rarely encountered a situation where I needed it, but it has come up before.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...