2 DIV가 float와 겹쳐 있습니다. right

Question

HTML과 CSS로 작업하고 있는데 중첩되는 요소를 재정렬하는 것이 어렵습니다.

Live example on the jsFiddle

CSS :

#posts { 
    background: blue; 
    float: right; 
    width: 75%; 
    padding: 5px; 
    border-radius: 4px; 
    -webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5); 
    box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5); 
} 

#login-container { 
    overflow: clear; 
    background: white; 
    width: 280px; 
    height: 330px; 
} 

HTML :

<div id="content" class="container"> 
    <div id="posts"> 
    <div id="login-container"> 
     <div id="login"> 
      <h1>Member login</h1> 
     </div> 
    </div> 
    </div> 
</div> 

내 브라우저 창 크기를 조정할 때이 두 항상 서로 중첩된다. 여기에 이미지를 게시 할 수 있지만 10 명의 담당자가 필요합니다.

Answer 1

여기 봐 : http://jsfiddle.net/nxyg0xwd/4/

#posts { 
    float: left; 
    width: 100%; 
    margin-left: 288px; 
} 

당신은 내용을 떠 떠났고, 로그인 VID의 크기에 여백을 만들어야합니다.

Answer 2

#posts div를 어디에서 끝내시겠습니까? #login-container이 #posts 안에 있기 때문일 수 있습니다.