patrick patrick - 2 years ago 68
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 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 id="item_36" class="item_details">
<div id="item_37" class="item_details">
<!-- this list of DIVs "item_xx" goes on for a while
each one representing a photo with name, caption etcetc -->
<br class="clear"/>

<div id="footer">

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
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 Source

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">

  <section class="content">


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download