CSS-Float-Eigenschaft zeigt keine Höhe?

Question

ich CSS ziemlich neu bin, so könnte dies aussehen dumm:

In CSS i die Eigenschaft float:left verwenden einen Gehalt links in das benachbarte Element zu positionieren, jetzt habe ich einen Container für alle Elemente die die Eigenschaft float haben. Wie kann ich das Erziehungselement anpassen, um seine Höhe an den Inhalt anzupassen?

die 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> 

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

mit den oben genannten, die <div id="page"> aussehen wie es hat eine Höhe von 0px .... wie kann ich machen es verzerrt den Inhalt ??

, da ich zu CSS bin neu, bitte erklären, was ich falsch mache, dank

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

Answer 1

Sie können für Ihre div #pageoverflow:hidden hinzufügen, die es erlaubt, um die Größe seines Inhalts zu passen.

See Working Demo.

Learn more about overflow property.

Alternativ können Sie auch <div class="clear"></div> hinzufügen und dann CSS.clear{clear:both;} das gleiche zu erreichen.

See Demo.

Answer 2

Ändern der Position von relativ zum absoluten können Sie auch helfen
prüfen diese JSFiddle Demo

Answer 3

Ist das, was Sie erwartet? http://jsfiddle.net/AuSmP/4/ fügen Sie einfach float: linken Stil zu #page wird den Trick beheben, oder Sie könnten auch clear: beide am unteren