CODEWITHSUNDEEP
csshtmlheight
Jérôme Verstrynge
Jérôme Verstrynge

Reputation: 59576

Div containing other divs does not have proper height

I have a 'frame' containing two divs which are respectively aligned on the left and on the right. Unfortunately, the main div does not have the proper height to englobe the inner divs.

Here is the HTML:

<div id="frm">
   <div id="a">aaa<br>aaa</div>
   <div id="b">bbb</div>
</div>

and the CSS:

#frm {
    background: red;
    width: 100%;
    height: auto;
}

#a {
    background: blue;
    float: left;    
}

#b {
    background: green;
    float: right;
}

Here is the JsFiddle: http://jsfiddle.net/mPH4H/

I should see a red frame, but there is none.

Upvotes: 2

Views: 4951

Answers (3)

java acm
java acm

Reputation: 1050

i think this is worked as fine:

#frm {
    background: red;
    width: 100%;
    height: auto;
}

#a {
    background: blue;
    width: 50%;
    float: left;    
}

#b {
    background: green;
    width: 50%;
    float: right;
}

Upvotes: 1

codingrose
codingrose

Reputation: 15699

overflow:hidden; will give height to #frm

Try:

#frm {
    background: red;
    width: 100%;
    height: auto;
    overflow:hidden;
}

DEMO here.

OR

Clear floats:

HTML:

<div id="frm">
    <div id="a">aaa<br>aaa</div>
    <div id="b">bbb</div>
    <div class="clr"></div>
</div>

CSS:

.clr{clear:both;}

DEMO here.

Upvotes: 1

j08691
j08691

Reputation: 207901

The floated elements are removed from the flow of the document, so the parent container thinks that it has nothing inside of it. You can add overflow:auto to your CSS rules for #frm to bring the background back and "contain" the floated children:

#frm {
    background: red;
    width: 100%;
    height: auto;
    overflow:auto;
}

jsFiddle example

Upvotes: 6

Related Questions