두 열이 나는 단순화하기 위해이 코드를 단순화 중간

Question

에서 (오른쪽과 왼쪽)하지만 내용을 떴다하지만 여기 내 코드 제공 :

<div class = "content_wrapper"> 
    <div class = "left_side"> 
     LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
      LEFT SIDE<br> 
    </div> 
    <div class = "right_side"> 
     RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
       RIGHT SIDE<br> 
    </div> 
    <div class = "bottom"> 
     bottom content 
    </div> 
</div> 

을 그리고 CSS는 다음과 같습니다

#content_wrapper 
{ 
    width: 960px; 
    margin: 0 auto; 
} 

div.left_side{margin:0px; width:100px; padding:0px 0 0 5px; float:left;} 
div.right_side{margin:0px; width:100px; padding:0px 0 0 5px; float:right;} 

여기에 살고있는 것을 볼 수 있습니다 : jsfiddle.

두 개의 오른쪽 및 왼쪽 컨테이너 아래쪽 하단 콘텐츠를 어떻게 만들 수 있습니까? div가 그들을 따라 간다면 왜 그 둘의 중간에 들어가는 지 모르겠다.

Answer 1

http://jsfiddle.net/L8YN6/2/

을 작동하고 다음을 추가 같아요 :

div.bottom {clear:both;} 

Answer 2

하는이 CSS를

.bottom 추가 {명확를 : 모두;}