How To Create A Fluid Height Div?

Question

Note: I'm still learning CSS & HTML, so if this question seems "noobish" - that's because it is. If you could provide an example, or an article geared towards my questions that would be great.

I created a div ("background"), which contains two divs ("left" & "right").

I'd like the "background" div's height to expand or contract, based up the amount of content in the "left" & "right" div.

#background {
width:100%;
height:15em;
background-color:#FFF;
box-shadow: 0 0 5px #888;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
clear:both;
}

I currently have the "background" div's height set to 15em, because I'm not sure how to make it expand or contract. I've tried setting it to "100%" and "auto", but those just make the "background" div disappear.

Here is my entire HTML & CSS code: http://jsfiddle.net/jueRh/

Answer 1

Set overflow: hidden; in #background and remove the height:15em; declaration.

demo: http://jsfiddle.net/sonic1980/jueRh/1/

Answer 2

If you leave your container div without a height value, it will become an extendable container to it's content.

If you still want your div to have a certain height, but expand on overflown content, you can use min-height. Also do note that min-height is only supported by equal or above enlisted browsers in this link.

EDIT: However, if you'll be using floated divs inside the container, you will have to clear the float for proper rendering. You can also use display:inline-block for a float alternative, which then you can skip the clearing, but that is also support limited.