patrick patrick - 1 year ago 58
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.