patrick patrick - 6 months ago 15
CSS Question

make div's height expand with its content

I have these nested divs and I need the main container to expand (in height) to accomodate the DIVs inside

<!-- head -->
...
<!-- /head -->

<body class="main">
<div id="container">
<div id="header">
<!--series of divs in here, graphic banner etc. -->
</div>

<div id="main_content"> <!-- this DIV _should_ stretch to accomodate inner divs -->
<div id="items_list" class="items_list ui-sortable">
<div id="item_35" class="item_details">
</div>
<div id="item_36" class="item_details">
</div>
<div id="item_37" class="item_details">
</div>
<!-- this list of DIVs "item_xx" goes on for a while
each one representing a photo with name, caption etcetc -->
</div>
</div>
<br class="clear"/>

<div id="footer">
</div>
</body>
</html>


CSS is this:

* {
padding: 0;
margin: 0;
}

.main {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #4c5462;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.main #container {
height: auto;
width: 46em;
background: #4c5462;
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
}

.main #main_content {
padding: 5px;
margin: 0px;
}
#items_list {
width: 400px;
float: left;
}

.items_list {
width: 400px;
float: left;
}
.item_details {
margin-top: 3px;
margin-bottom: 3px;
padding: 3px;
float: left;
border-bottom: 0.5px solid blue;
}


The problem I have is that
#main_content
doesn't stretch to accomodate all the inner divs, with the result that they keep going against the background.

How can I solve this?

Answer

You need to force a clear:both before the #main_content div is closed. I would probably move the <br class="clear" />; into the #main_content div and set the CSS to be:

.clear { clear: both; }

Update: This question still gets a fair amount of traffic, so I wanted to update the answer with a modern alternative using a new layout mode in CSS3 called Flexible boxes or Flexbox:

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}
<div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div>

Most modern browsers currently support Flexbox and viewport units, but if you have to maintain support for older browsers, make sure to check compatibility for the specific browser version.