CSS float property shows no height?

Question

I'm fairly new to CSS, so, this might look silly:

In CSS, i use the property to float:left to position a content left to the neighbouring element, now, i have a container for all the elements that have the float property. how do i make the parenting element adjust it's height according to it's content?

the HTML:

<div id="page">
<div id="side">
    <p>my sidebar</p>
</div>
<div id="content">
    <p>my content</p>
    <p>my content1</p>
    <p>my content2</p>
    <p>my content3</p>
</div>

​

the CSS

/* the "border:3px solid #000;" are used to make the div border visble*/
#page{
position:relative;
width:400px;
background-color: #F4F0EC;
border:3px solid #000;
}
#side{

border:3px solid #000;
float:left;
}
#content{
float:left;
 border:3px solid #000;
}

with the above, the <div id="page"> look like it has a height of 0px.... how do i make it warp the content ??

since i'm new to CSS, please explain what am i doing wrong, thanks

Fiddle:http://jsfiddle.net/AuSmP/

Answer 1

You can add overflow:hidden for your div #page which will allow it to resize to fit its contents.

See Working Demo.

Learn more about overflow property.

Alternatively you can also add <div class="clear"></div> and then CSS .clear{clear:both;} to achieve the same.

See Demo.

Answer 2

Changing Position from relative to absolute can also help you out
Check this JSFiddle Demo