447

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?

patrick
  • 7,369
  • 5
  • 20
  • 14
  • 6
    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 Nov 10 '09 at 18:56
  • 1
    @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 `Edited$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 Thomas Nov 10 '09 at 22:32
  • 4
    You also never closed the `div` tag with `id='container'`. That could cause some problems. – Batkins Jun 22 '12 at 15:37
  • @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 Feb 03 '17 at 22:47

27 Answers27

312

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.

jennyfofenny
  • 4,359
  • 2
  • 17
  • 15
  • 4
    [Here](http://www.w3schools.com/cssref/pr_class_clear.asp)'s the w3schools article on the CSS clear property. Basically, clear means that the element the clear is applied to begins below the floats in its flow (either only left, only right or both). – jennyfofenny Jan 27 '12 at 19:22
  • But the Flex example contains a min-height:100vh, so not relevant to the original question. Not clear if flex is the right approach even nowadays given the simplicity and compatibility of clear:both – Mike A Feb 14 '21 at 14:43
  • 1
    I believe the Flex example is simply a better approach, in general. If you would like to maintain legacy code, then the clear: both is adequate. However, in my opinion having worked with these layouts for decades, the old layout formats are much more difficult to work with and not as good, intuitive, or easy for developing responsive websites. – jennyfofenny Feb 17 '21 at 20:31
  • I added height: auto; besides the above codes and it working well for me – Faisal Jun 07 '21 at 03:10
270

Try this: overflow: auto;

It worked for my problem..

sipőcz péter
  • 2,757
  • 1
  • 13
  • 2
  • 11
    +1, This solution is elegant and doesn't add an invisible tag to your page. See this fiddle: http://jsfiddle.net/XmKrm/1/ – Nabil Kadimi May 12 '13 at 23:59
  • 5
    overflow auto worked well for me. FYI this will add a scroll bar if the height of the overflow auto container is less than the content inside. Size it up too or set height: auto along with the overflow. – Bryan Myers Nov 14 '14 at 23:35
  • @Roozbeh15 add `display: block;` with it – BadAtPHP Nov 10 '15 at 11:24
  • @Merkurial it "establishes a new block formatting context" https://developer.mozilla.org/en-US/docs/Web/CSS/overflow . Without it, the container needs either to be a block-level element (with float and width/height) or it won't work. When container isn't block-level element, you need to convert it to one, either by adding float and width/height to it (which isn't possible all the time), or using "overflow:auto" which does the deed. P.S.: container covers its content only when it is block-level element. – Gelmir Jun 08 '20 at 21:54
  • This is the actual correct answer to this question. Flex-box solution presented above isn't ideal, as sometimes it's just impossible to have that. Clearfix solution is an ugly, non-semantic garbage of the past. – Gelmir Jun 08 '20 at 21:56
96

add the following:

overflow:hidden;
height:1%;

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

Eliran Malka
  • 15,821
  • 6
  • 77
  • 100
Nick
  • 969
  • 6
  • 2
  • wow! that did the exact opposite of what i would have expected! overflow: hidden = expand to fit content! i never would have guessed that! – mulllhausen Mar 07 '13 at 10:32
  • Yes, this worked for me too and it doesn't fully make sense why. Any explanation why the 'height 1%' and 'overflow hidden' work? – acarlon Oct 01 '13 at 03:31
  • 1
    really how does it and even why it works, if no height is set why overflow hidden not just hides everything (cos height is 0) but expand itself, is there any explanation or just believe and be happy? – Max Yari Jan 23 '15 at 00:33
  • 1
    overflow:hidden hides the scrollbars but keeps the size of the block – authentictech Sep 15 '15 at 15:41
  • 1
    worked for me with just 'overflow:hidden' but 'overflow:auto' also worked and didn't show scrollbars. – Whirlwind991 Jun 07 '17 at 04:36
65

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

display:table;

jsFiddle

Venkateshwaran Selvaraj
  • 1,745
  • 8
  • 30
  • 60
h0mayun
  • 3,466
  • 31
  • 40
37

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.

Charles
  • 395
  • 6
  • 12
  • 1
    `height: auto;` causes all the items below to move to the top. With this property on my main content div, the footer of my page moves upwards so that it touches the header and overlaps my content div. – Aaron Franke Nov 24 '18 at 04:31
17

Very simple way

On parent DIV:

height: 100%;

This work for me every time

Community
  • 1
  • 1
Daniel Beltrami
  • 756
  • 9
  • 22
15

Thw following should work:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}
Steerpike
  • 17,163
  • 8
  • 39
  • 53
  • adding overflow: auto worked, although if I add also width: 100%, that causes the div (#main_content) to be slightly bigger than it's parent div. Didn't get why! – patrick Nov 10 '09 at 18:59
  • 2
    that's because the padding counts in addition to the width specified, so the width of your element is 100% + 5px left padding + 5px right padding – NickV Jul 13 '11 at 10:20
  • 1
    overflow: auto; worked for me, thank you veddy much. – Cosco Tech May 13 '15 at 15:48
11

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

Ifti Mahmud
  • 862
  • 10
  • 15
9

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.

mtk
  • 13,221
  • 16
  • 72
  • 112
dark marc
  • 91
  • 1
  • 1
  • Your hoping worked: it at least helped me! :) Btw, I left my element as a `div` (instead of a `span`) but `display: inline-block` still worked in my case (Chromium). – snapfractalpop Dec 11 '12 at 04:57
6

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; }
Justin Morgan - On strike
  • 30,035
  • 12
  • 80
  • 104
David Thomas
  • 249,100
  • 51
  • 377
  • 410
6

Before to do anything check for css rules with:

{ position:absolute }

Remove if exist and don't need them.

onalbi
  • 2,609
  • 1
  • 24
  • 36
  • 3
    Because "absolute positioned elements are removed from the flow, thus ignored by other elements. So you can't set the parents height according to an absolutely positioned element." http://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height – Federico Nov 13 '15 at 02:05
5

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

Philipp Kyeck
  • 18,402
  • 15
  • 86
  • 123
Ray
  • 21,485
  • 5
  • 48
  • 64
  • Thanks Ray, this worked although it shrunk the div to the size of it's content (#items_list) which has width: 400px; Your solution would be really good if I could make #main_content stay to its full width - any suggestions? – patrick Nov 10 '09 at 19:06
  • @Ray 2 and a bit years later and this just saved me a potential headache with a similar problem. Thank you! – John H Jan 08 '12 at 20:03
5

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.

CesareoAguirre
  • 1,557
  • 13
  • 11
4

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.

3

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

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

2

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.

Community
  • 1
  • 1
Adrian
  • 16,233
  • 18
  • 112
  • 180
2

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

PongGod
  • 829
  • 1
  • 11
  • 19
2

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

Ali Ben Messaoud
  • 11,690
  • 8
  • 54
  • 87
ingrid
  • 555
  • 4
  • 17
1

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.

  • Must be some way to do this with css, but I haven't any idea what that would be. This worked for me, but I had to add width:100%; height:auto; min-height:100%; position:relative; – RationalRabbit Oct 31 '17 at 03:15
1

I tried this and it worked

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>
Tunaki
  • 132,869
  • 46
  • 340
  • 423
0

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

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

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

Jelle
  • 1
  • 1
    This is not a clear answer to the question. For remarks, please use the comment function. – ksbg Apr 09 '15 at 11:03
0

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
Sharikov Vladislav
  • 7,049
  • 9
  • 50
  • 87
0

I faced the same problem. I solved it in different way.

As <div id="container"> is parent of <div id="main_content"> (which you want to expand as its children div/s gets added).

So in css of .main #container, you can remove height and width for this container div. So as the children div/s gets added inside <div id="main_content">, which is children of <div id="container">, <div id="main_content"> will get its in height and width increased as per its children content automatically without adding scroll-bar to it.

Hopes it helps.

Thanks

Alok Ranjan
  • 967
  • 10
  • 10
-1

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

Draken
  • 3,134
  • 13
  • 34
  • 54