Pływający rodzic dziecka CSS sprzątający

Question

Mam układ dwukolumnowy, boczny pasek po lewej stronie, treść po prawej stronie.

Przesuwam więc pasek boczny w lewo i nadam zawartość po prawej stronie marginesu. Wszystko jest w porządku i dobrze ...

Do momentu, gdy element podrzędny treści zostanie wyraźnie zastosowany, przeskakuje poniżej paska bocznego.

Czy istnieje sposób, aby element dla dzieci był unoszony i czysty tylko w kontenerze nadrzędnym?

Ponieważ obraz jest wart 1000 słów, oto JSFiddle:

http://jsfiddle.net/qRYYm/1/

Answer 1

Jeśli dodać overflow:auto; do .content że powinien zobaczyć masz rację.

Answer 2

Co o tym:

aside{ 
    position: absolute; 
    height: 300px; 
    width: 100px; 
} 

http://jsfiddle.net/qRYYm/2/

Answer 3

Powinieneś unikać używania clear. Można użyć overflow: hidden z pojemnika głównego

<div class="content"> 
    <div class="one">One</div> 
    <div class="two">Two</div>  
</div> 

.content { float: left; overflow: hidden; width: 900px; } 
aside { float: left; width: 100px; } 

Ponadto, nie należy używać margin-left: 100px naciskać na zawartość od lewej kolumnie. Pływak obaj w lewo. Uważam, że kolumny lubią być w głównym opakowaniu. W ten sposób jest bardziej przytulnie.

Answer 4

Możesz to zrobić w ten sposób.

.left{float:left;} 
.right {float:right;} 
.clear{clear:both;} 

<div> 
    <div class="left">SideBar</div> 
    <div class="right"> 
      <div> 
       <div class="left">content 1</div> 
       <div class="left">content 2</div> 
       <div class="clear"></div> 
      </div> 
    </div> 
    <div class="clear"></div> 
</div> 

Przy stosowaniu pływaka na każdym div (ów), umieścić je w div nadrzędnej i jasne w ciągu tego samego rodzica div