Własność CSS pokazuje brak wysokości?

Question

Jestem całkiem nowy, CSS, więc może to wyglądać głupio:

W CSS, używam właściwość float:left aby umieścić zawartość lewej do sąsiedniego elementu, teraz mam kontenera dla wszystkich elementów które mają właściwość float. jak sprawić, by element rodzicielski dopasował jego wysokość zgodnie z zawartością?

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> 

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; 
} 

z powyższym <div id="page"> wyglądało, że ma wysokość 0px .... Jak zrobić to wypacza treść?

ponieważ jestem nowy w CSS, proszę wyjaśnić, co robię źle, dzięki

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

Answer 1

Możesz dodać overflow:hidden Dla Państwa div #page które pozwolą jej na zmianę rozmiaru, aby dopasować jego zawartość.

See Working Demo.

Learn more about overflow property.

Alternatywnie można też dodać <div class="clear"></div> a następnie CSS.clear{clear:both;} aby osiągnąć to samo.

See Demo.

Answer 2

zmianie pozycji od względem absolutnym może również pomóc
Sprawdź to JSFiddle Demo

Answer 3

Czy to czego oczekiwałeś? http://jsfiddle.net/AuSmP/4/ po prostu dodaj float: lewy styl do #page naprawi trik, możesz też użyć clear: zarówno na dole