Container Div non expanding to inner div content

Question

I have been looking all night, and I have to be doing something incorrectly, as I have seen this question or similar has been posted before. My apologies for needing to ask it again.

I have a a container div that holds some other divs, that is not expanding with the inner div content. The code can be found here: http://jsfiddle.net/pR7bq/

I can't remove height: 100%; from #container, because it needs to accomodate less content as well. I have seen the mention of using

<br style="clear:both" />

but I'm either using it incorrectly or it's not working. I found this well written out answer to the same or similar problem here: What methods of ‘clearfix’ can I use?, however, I'm at a loss as to where to put the code. My best attempts have yielded failure. I have also tried using overflow attributes, but I don't want the scrollbar to appear on the div rather than the page, if that makes sense.

I appreciate all help, and thank you in advance.

When I use height:auto; it fits to the content, but when there is very little content, it doesn't extend to bottom of the viewing window. @Rohit Azad, min-height works BRILLIANTLY! Thank you all very much for your help! — dosi5127, Mar 12 '13 at 18:16

npage · Answer 1 · 2013-03-12T02:30:42.803

1

Use this for your container styling:

#container{
    width:80%;
    background:#f6f6f6;
    height:auto;
    margin: 0 auto;
}

By using height auto, the browser tries to determine a height for the element that will cover all of its children.

When you used height: 100%, it determined the height based upon the element container's parent height.

edited Mar 12 '13 at 02:30

answered Mar 12 '13 at 02:25

npage

1,258
10
14

score 1 · Accepted Answer · answered Mar 12 '13 at 04:16

1

now used to min-height not height

as like this

#container{
height:100%; // remove this line
min-height:100%; // add this line 
}

Live Demo

answered Mar 12 '13 at 04:16

Rohit Azad Malik

31,410
17
69
97

score 0 · Answer 3 · answered Mar 12 '13 at 02:26

i usually just throw a class like this in my css

.iefix{ clear: both;font-size: 1px;}

then i throw it in a div under the divs that aren't behaving in IE

<div class="wrap">
    <div class="left">
    </div>
    <div class="right">
    </div>
    <div class="iefix"></div>
</div>

score 0 · Answer 4 · answered Mar 12 '13 at 06:38

0

use height auto or dont define height to solve your problem

answered Mar 12 '13 at 06:38

Atif Azad

527
1
4
15

Container Div non expanding to inner div content

4 Answers4