make div's height expand with its content

Html Problem Overview

I have these nested divs and I need the main container to expand (in height) to accommodate 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 accommodate 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 accommodate all the inner divs, with the result that they keep going against the background.

How can I solve this problem considering the above scenario?

Html Solutions

Solution 1 - Html

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.

Solution 2 - Html

Try this: overflow: auto;

It worked for my problem..

Solution 3 - Html

add the following:

overflow:hidden;
height:1%;

to your main div. Eliminates the need for the extra <br /> for the clear.

Solution 4 - Html

as an alternative way you can also try this that may be usefull in some situations

display:table;

jsFiddle

Solution 5 - Html

I would just use

height: auto;

in your div. Yes, I know I'm a-little late but I figured this might help somebody like it would have helped me if it was here.

Solution 6 - Html

Very simple way

On parent DIV:

height: 100%;

This work for me every time

Solution 7 - Html

Thw following should work:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}

Solution 8 - Html

Use the span tag with display:inline-block css attached to it. You can then use CSS and manipulate it like a div in lots of ways but if you don't include a width or height it expands and retracts based on its content.

Hope that helps.

Solution 9 - Html

This problem arises when the Child elements of a Parent Div are floated. Here is the Latest Solution of the problem:

In your CSS file write the following class called .clearfix along with the pseudo selector :after

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

Then, in your HTML, add the .clearfix class to your parent Div. For example:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

It should work always. You can call the class name as .group instead of .clearfix , as it will make the code more semantic. Note that, it is Not necessary to add the dot or even a space in the value of Content between the double quotation "". Also, overflow: auto; might solve the problem but it causes other problems like showing the scroll-bar and is not recommended.

Source: Blog of Lisa Catalano and Chris Coyier

Solution 10 - Html

Typically I think this can be resolved by forcing a clear:both rule on the last child-element of the #items_list.

You can either use:

#items_list:last-child {clear: both;}

Or, if you're using a dynamic language, add an additional class to the last element generated in whatever loop creates the list itself, so you end up with something in your html like:

<div id="list_item_20" class="last_list_item">

and css

.last_list_item {clear: both; }

Solution 11 - Html

Before to do anything check for css rules with:

{ position:absolute }

Remove if exist and don't need them.

Solution 12 - Html

add a float property to the #main_content div - it will then expand to contain its floated contents

Solution 13 - Html

Looks like this works

html {
 width:100%;
 height:auto;
 min-height:100%
}

It takes the screen size as minimum, and if the content expands it grows.

Solution 14 - Html

Have you tried the traditional way? give the main container height:auto

#container{height:auto}

I have used this and it worked most of the times with me.

Solution 15 - Html

Floated elements do not occupy the space inside of the parent element, As the name suggests they float! Thus if a height is explicitly not provided to an element having its child elements floated, then the parent element will appear to shrink & appear to not accepting dimensions of the child element, also if its given overflow:hidden; its children may not appear on screen. There are multiple ways to deal with this problem:

Insert another element below the floated element with clear:both; property, or use clear:both; on :after of the floated element.
Use display:inline-block; or flex-box instead of float.

Solution 16 - Html

In CSS: #clear_div{clear:both;}

After the div tag of the inner div add this new following div

<div id="clear_div"></div>

http://www.w3schools.com/cssref/pr_class_clear.asp : for more information

Solution 17 - Html

I added Bootstrap to a project with section tags that I had set to 100% of screen height. It worked well until I made the project responsive, at which point I borrowed part of jennyfofenny's answer so my section background matched background of the content when the screen size changed on smaller screens.

My new section CSS looks like this:

section {
    // min-height so it looks good on big screen
    // but resizes on a small-screen
    min-height: 100%;
    min-height: 100vh;
    width:100%;
    width:100vh;
}

Let's say you've got a section that's a certain color. By using min-height, if the width of the section shrinks because of a smaller-screen, the height of the section will expand, the content will stay within the section, and your background will stay the desired color.

Solution 18 - Html

I tried pretty much every suggestion listed above and none of them worked. However, "display: table" did the trick for me.

Solution 19 - Html

I'm running into this on a project myself - I had a table inside a div that was spilling out of the bottom of the div. None of the height fixes I tried worked, but I found a weird fix for it, and that is to put a paragraph at the bottom of the div with just a period in it. Then style the "color" of the text to be the same as the background of the container. Worked neat as you please and no javascript required. A non-breaking space will not work - nor does a transparent image.

Apparently it just needed to see that there is some content below the table in order to stretch to contain it. I wonder if this will work for anyone else.

This is the sort of thing that makes designers resort to table-based layouts - the amount of time I've spent figuring this stuff out and making it cross-browser compatible is driving me crazy.

Solution 20 - Html

I tried this and it worked

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>

Solution 21 - Html

If you are using jQuery UI, they already have a class the works just a charm add a <div> at the bottom inside the div that you want expand with height:auto; then add a class name ui-helper-clearfix or use this style attribute and add just like below:

<div style=" clear:both; overflow:hidden; height:1%; "></div>

add jQuery UI class to the clear div, not the div the you want to expand.

Solution 22 - Html

I know this is kind of old thread, however, this can be achieved with min-height CSS property in a clean way, so I'll leave this here for future references:

I made a fiddle based on the OP posted code here: http://jsfiddle.net/U5x4T/1/, as you remove and add divs inside, you'll notice how does the container expands or reduces in size

The only 2 things you need to achieve this, additional to the OP code is:

*Overflow in the main container (required for the floating divs)

*min-height css property, more info available here: http://www.w3schools.com/cssref/pr_dim_min-height.asp

Solution 23 - Html

Added display:inline to the div and it grew auto ( not the scroll stuff ) when height content got bigger then the set div height of 200px

Solution 24 - Html

You can use CSS Grid Layout. Support is rather wide at the moment: check it on caniuse.

Here is the example on jsfiddle. Also example with tons of text stuff.

HTML code:

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

CSS Code:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
  
  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: auto;
}
// style stuff

Solution 25 - Html

I have tried height: fit-content and it worked for me

Solution 26 - Html

No need to use a lot of CSS, just use bootstrap, then use:

class="container"

for the div that needs to be filled.

You can get bootstrap from here

Content Type	Original Author	Original Content on Stackoverflow
Question	patrick	View Question on Stackoverflow
Solution 1 - Html	jennyfofenny	View Answer on Stackoverflow
Solution 2 - Html	sipőcz péter	View Answer on Stackoverflow
Solution 3 - Html	Nick	View Answer on Stackoverflow
Solution 4 - Html	h0mayun	View Answer on Stackoverflow
Solution 5 - Html	Charles	View Answer on Stackoverflow
Solution 6 - Html	Daniel Beltrami	View Answer on Stackoverflow
Solution 7 - Html	Steerpike	View Answer on Stackoverflow
Solution 8 - Html	dark marc	View Answer on Stackoverflow
Solution 9 - Html	Ifti Mahmud	View Answer on Stackoverflow
Solution 10 - Html	David Thomas	View Answer on Stackoverflow
Solution 11 - Html	onalbi	View Answer on Stackoverflow
Solution 12 - Html	Ray	View Answer on Stackoverflow
Solution 13 - Html	CesareoAguirre	View Answer on Stackoverflow
Solution 14 - Html	Michelle Dimwaite	View Answer on Stackoverflow
Solution 15 - Html	Apoorv Srivastava	View Answer on Stackoverflow
Solution 16 - Html	ingrid	View Answer on Stackoverflow
Solution 17 - Html	Adrian	View Answer on Stackoverflow
Solution 18 - Html	PongGod	View Answer on Stackoverflow
Solution 19 - Html	Nancy Hastings-Trew	View Answer on Stackoverflow
Solution 20 - Html	Ahmed Aboelela	View Answer on Stackoverflow
Solution 21 - Html	Lucas M. Oliveira	View Answer on Stackoverflow
Solution 22 - Html	Juan Carlos Alpizar Chinchilla	View Answer on Stackoverflow
Solution 23 - Html	Jelle	View Answer on Stackoverflow
Solution 24 - Html	Sharikov Vladislav	View Answer on Stackoverflow
Solution 25 - Html	Abdeldjalil Hachimi	View Answer on Stackoverflow
Solution 26 - Html	Thadeo Arlo	View Answer on Stackoverflow