How do I make a div expand as content is added?

Report · Dec 03, 2013

I'm making a basic CSS page layout in Dreamweaver CS4. The page is one column with headers, footers, and a big area in the middle for the main content, all set out as divs within one overall div that contains everything.

I've set the height of the overall container div to 'auto'. The main content div height is also set to 'auto'. I thought this would make the main content area expand as necessary, when text and images are placed into it - as would happen with a table-based layout. Everything else would stay in the correct relative position - the divs below the main content div would simply move down as the main content div expands.

Unfortunately, it doesn't seem to work. As the main content div moves down, it pushes everything below it out of the way more or less randomly. The lower part of the page layout breaks up as the divs below the main content div are shunted out of position.

Is there a bit of code I need to keep it all together? Maybe somewhere under #container #maincontent in the code below?

Thanks in advance for any insights!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

<!--

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 100%;

background-color: #333;

text-align: left;

padding-top: 10px;

padding-right: 0px;

padding-bottom: 10px;

padding-left: 0px;

margin: 0px;

}

#container {

font-family: Arial, Helvetica, sans-serif;

font-size: 100%;

background-color: #000;

text-align: left;

padding: 0px;

width: 960px;

margin-top: 0px;

margin-right: auto;

margin-bottom: 20px;

margin-left: auto;

border: 4px solid #FFF;

height: auto;

}

#container #header {

background-color: #FFF;

height: 268px;

width: 940px;

padding-top: 2px;

padding-right: 0px;

padding-bottom: 0px;

padding-left: 20px;

}

#container #header2 {

font-family: Arial, Helvetica, sans-serif;

font-weight: bold;

background-color: #CCC;

height: 50px;

width: 920px;

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 4px;

border-left-width: 0px;

border-top-style: none;

border-top-color: #FFF;

border-right-color: #FFF;

border-bottom-color: #FFF;

border-left-color: #FFF;

padding-top: 10px;

padding-right: 20px;

padding-bottom: 10px;

padding-left: 20px;

border-bottom-style: solid;

}

#container #header2 #navigationbox {

float: left;

height: 50px;

width: 600px;

}

#container #header2 #buttonbox {

}

#container #maincontent {

font-family: Arial, Helvetica, sans-serif;

color: #FFF;

background-color: #000;

text-align: left;

width: 920px;

font-size: 16px;

font-style: normal;

line-height: normal;

font-weight: normal;

padding: 20px;

clear: both;

height: auto;

}

#container #footer {

font-family: Arial, Helvetica, sans-serif;

background-color: #CCC;

text-align: center;

padding: 10px;

border-top-width: 4px;

border-top-style: solid;

border-top-color: #FFF;

border-right-color: #FFF;

border-bottom-color: #FFF;

border-left-color: #FFF;

}

#topadbox {

background-color: #CCC;

}

#container #footer2 {

background-color: #CCC;

height: 90px;

width: 920px;

border-top-width: 4px;

border-top-style: solid;

border-top-color: #FFF;

font-family: Verdana, Geneva, sans-serif;

font-size: 18px;

line-height: 24px;

font-weight: bold;

padding-top: 20px;

padding-right: 20px;

padding-bottom: 10px;

padding-left: 20px;

}

#container #header #masthead {

background-color: #FFF;

text-align: left;

height: 260px;

width: 550px;

padding-left: 15px;

float: left;

}

#container #header #topadbox {

float: right;

}

#container #header #topadbox {

background-color: #FFF;

border: 4px solid #666;

float: right;

height: 250px;

width: 300px;

clear: none;

}

#container #header #topadbox {

padding: 0px;

float: right;

height: 250px;

width: 300px;

background-color: #FFF;

border-top-width: 5px;

border-right-width: 20px;

border-bottom-width: 5px;

border-left-width: 20px;

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: #CCC;

border-right-color: #CCC;

border-bottom-color: #CCC;

border-left-color: #CCC;

margin-top: 0px;

margin-right: 2px;

margin-bottom: 0px;

margin-left: 0px;

}

#container #footer #bannerbox {

margin: auto;

height: 100px;

width: 728px;

}

#searchbox {

height: 50px;

width: 860px;

border-top-width: 4px;

border-top-style: solid;

border-top-color: #FFF;

background-color: #CCC;

padding-right: 70px;

padding-left: 30px;

padding-top: 20px;

padding-bottom: 10px;

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

}

#container #footer2 #creditsbox {

}

#container #footer2 {

padding-top: 20px;

padding-right: 20px;

padding-bottom: 20px;

padding-left: 20px;

}

#container #header2 #buttonbox {

float: right;

height: 50px;

width: 300px;

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

line-height: 20px;

font-weight: bold;

color: #000;

padding: 4px;

}

#container #header2 #navigationbox {

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

line-height: 25px;

font-weight: bold;

color: #000;

}

a:link {

color: #F00;

}

a:visited {

color: #F0F;

}

a:active {

color: #F90;

font-weight: bold;

font-style: italic;

font-size: 16px;

}

#container #footer2 #creditsbox {

float: left;

height: 90px;

width: 260px;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

line-height: normal;

font-weight: normal;

}

#container #footer2 #creativecommonsbox {

float: left;

height: 90px;

width: 520px;

margin-left: 20px;

font-size: 12px;

font-family: Arial, Helvetica, sans-serif;

line-height: 14px;

font-weight: normal;

}

#container #footer2 #backtotopbox {

float: left;

height: 90px;

width: 100px;

margin-left: 20px;

}

#container #footer2 #backtotopbox {

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

font-weight: bold;

}

#container #maincontent {

height: auto;

}

-->

</style>

</head>

<body>

<div id="topadbox"><script type="text/javascript"><!--

google_ad_client = "pub-9536785785834220";

/* Top of page ad */

google_ad_slot = "9886597060";

google_ad_width = 300;

google_ad_height = 250;

//-->

</script>

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script></div>

</div>

<a href="http://www.nemesis.to">Home</a> | <a href="http://www.nemesis.to/live.htm">Live</a> | <a href="http://www.nemesis.to/records.htm">CDs/Vinyl/Downloads</a> | <a href="http://www.nemesis.to/records.htm">Photos</a> | <a href="http://www.nemesis.to/int.htm">Interviews</a><br />

<a href="http://www.nemesis.to/archive.htm">Archive</a> |

<a href="http://www.nemesis.to/about.htm">Information and Contacts</a> | <a href="http://www.nemesis.to/links.htm">Links</a>

</center>

</div>

</map>

</div>

<p>

google_ad_client = "pub-9536785785834220";

/* Bottom of page ad */

google_ad_slot = "0254538778";

google_ad_width = 728;

google_ad_height = 90;

//-->

</script>

src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script>

</p>

</div>

<tr>

<td width="291" align="right" valign="middle"><input type="text" name="q" size="35"

maxlength="255" value="" /></td>

<td width="247" align="center" valign="middle"><input type="checkbox" name="sitesearch"

value="nemesis.to" checked />

<span class="searchtext">Search Nemesis To Go</span></td>

</tr>

</table>

</div>

</form></div>

<div id="creditsbox">Page credits: Photos and construction by <a href="http://www.nemesis.to/about.htm"><strong>Michael Johnson</strong></a>. Nemesis logo by <a href="http://www."><strong>Antony Johnston</strong></a>. Red N version by<strong> <a href="http://www.rimmell.com">Mark Rimmell</a></strong>.</div>

<div id="creativecommonsbox"><img src="images_graphics/creativecommonslogo.png" width="88" height="31" hspace="4" vspace="4" align="left" />Words and photos in Nemesis To Go by Michael Johnson are licenced under <a href="http://www.creativecommons.org/licences"><strong>Creative Commons</strong></a>. You may copy and distribute this material, or derivations of it, provided that you give a credit to Michael Johnson and a link to <strong><a href="http://www.nemesis.to">Nemesis To Go</a></strong>. Where material from other sources is used, copyright remains with the original owners. All rights in the name 'Nemesis To Go' and the 'N' logo are retained.</div>

</div>

</body>

</html>

Report · Dec 03, 2013

Div height is solely determined by how much content it contains. It's best to avoid using explicit height values as this limits how much content a div can hold. If needed to reveal a background image, use min-height instead of height.

If your #container has floated divs inside it and is not expanding to content, add the following property to your #container's CSS code.

#container {

overflow: hidden; /**for float containment**/

}

For details on why this works, see link below:

http://colinaarts.com/articles/the-magic-of-overflow-hidden/

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 03, 2013

Excellent - adding that little extra bit of code fixed the problem. Thanks very much. Thanks for the link, too - good stuff to know!

How do I make a div expand as content is added?

1 Correct answer