CSS float özelliği yükseklik göstermiyor mu?

Question

CSS için oldukça yeni, bu yüzden, bu saçma görünebilir:

CSS olarak, ben bir içerik komşu elemana sola konumlandırmak için float:left için özelliğini kullanın şimdi, ben tüm öğeler için bir kap var yüzen mülkiyeti var. Ebeveyn elemanının içeriğine göre yüksekliğini ayarlamasını nasıl sağlayabilirim?

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 yukarıdaki ile

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

, böyle <div id="page"> bakmak i nasıl yapabilirim .... 0px bir yüksekliğe sahiptir içeriği çözgü?

i CSS yeniyim beri ben yanlış yapıyorum açıklayınız, teşekkür

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

Answer 1

Bunu içindekileri sığdırmak için yeniden boyutlandırmak sağlayacak sizin div #page için overflow:hidden ekleyebilir.

Learn more about overflow property.

See Working Demo.

Alternatif olarak <div class="clear"></div> ekleyebilir ve ardından CSS.clear{clear:both;} aynı elde etmek.

See Demo.

Answer 2

mutlak göreli gelen Konumunu değiştirmek de bu JSFiddle Demo

Answer 3

bu beklediğiniz mi
Kontrol dışarı yardımcı olabiliriz? http://jsfiddle.net/AuSmP/4/ Sadece float ekleyin: # page sol hileyi düzeltecektir, ya da aşağıdakileri de kullanabilirsiniz: her ikisi de altta