height of div equals to "0"

Question

I have a very simple html code:

<body>
        <div id="container">
            <div id="left">
                some text here
            </div>
            <div id="right">
                and some text here
            </div>
        </div>
    </body>

and styles:

div#left {
    float: left;
    background: #e2e2e2;
}

div#right {
    float: right;
    background: #1469ab;
}

I want to have the height of div #container equal to heights of it's content, but now it actually 0. How to implement this behavior?

possible duplicate of [Which method of 'clearfix' is best?](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best) — Pekka, Nov 15 '10 at 11:17

score 3 · Accepted Answer · answered Nov 15 '10 at 11:17

3

you should apply a non-structural clearing to the container like easyclearing http://www.positioniseverything.net/easyclearing.html

otherwise you can also specify height: auto; overflow: hidden to the container

answered Nov 15 '10 at 11:17

overflow:hidden; is the only thing needed. – Marwelln Nov 15 '10 at 11:26
This is not always going to work in IE. You may need to add zoom:1; to be properly cross browser. Also as that is not a standard CSS rule it would be best to put it in a conditionally included CSS file. – Coin_op Nov 15 '10 at 11:59
laurencek, usually internet explorer already makes autoclearing (I don't know in IE9) but easyclearing is the best crossbrowser technique, afaik. – Nov 15 '10 at 12:02
I hadn't actually read the easyclearing method. I was commenting more on the use of overflow clear. But I see easyclearing uses the zoom:1 anyway. – Coin_op Nov 15 '10 at 12:07

score 2 · Answer 2 · answered Nov 15 '10 at 11:17

2

add overflow:auto to your #container

answered Nov 15 '10 at 11:17

tobiasmay

197
1
2
14

height of div equals to "0"

2 Answers2