make div's height expand with its content

410
votes

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?

25
htmlcssheight
Guys thank you all for the answers! the best solution for my specific case was to hard-code a BR to clear both sides (thanks Jennyfofenny and also Ricebowl) Anyway, also other solutions have worked: putting overflow:auto was ok, and floating #main_content was also ok (although ir reduced the width of that div to the size of child divs). Now being a newbie I'm wondering: do these solutions have drawbacks, or I can use them indifferently? (eg. maybe one of them doesn't work with IE6, or similar...) – patrick
@Patrick, if you want to further develop your question, click on the 'edit' link (below the current text of the question) and add in the further questions. Convention suggests using something like <strong>Edited</strong>$Reason_for_revising_question... You may need to change the question title to reflect the changes if there's a major change or addition in its focus. =) – David says reinstate Monica
You also never closed the div tag with id='container'. That could cause some problems. – Batkins
@patrick, you also don't have the CSS for .clear class. Did you forget it, or is it in your original code? The .clear class on that br is very important as @jennyfofenny mentions in their answer. – Cannicide

25 Answers

302
votes

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.

254
votes

Try this: overflow: auto;

It worked for my problem..

91
votes

add the following:

overflow:hidden;
height:1%;

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

65
votes

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

display:table;

jsFiddle

34
votes

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.

14
votes

Thw following should work:

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

Very simple way

On parent DIV:

height: 100%;

This work for me every time

8
votes

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.

7
votes

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

6
votes

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; }
6
votes

Before to do anything check for css rules with:

{ position:absolute }

Remove if exist and don't need them.

5
votes

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

4
votes

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.

3
votes

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:

  1. Insert another element below the floated element with clear:both; property, or use clear:both; on :after of the floated element.

  2. Use display:inline-block; or flex-box instead of float.

3
votes

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.

2
votes

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

2
votes

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.

1
votes

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.

1
votes

I tried this and it worked

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

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.

0
votes

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

0
votes

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

0
votes

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
0
votes

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

-2
votes

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