DIV가 옆으로가 아니라 아래로 밀린 이유는 무엇입니까?

Question

나는 그 위로 마우스를 가져갈 때 슬라이드 아웃 div를 만들려고합니다. 내가 원하는 것은 왼쪽 div가 올바른 div를 망각으로 밀어 넣기를 원하지만 div 아래가 아니라 오른쪽으로 밀어 넣기를 원합니다. 왜 이런 일이 발생하는지 알고 있습니까?

.container { 
    width: 796px; 
    background-color: yellow; 
    overflow:hidden; 
} 
.left { 
    display:none; 
    float: left; 
    width: 256px; 
    background: green; 
} 
.right { 
    float: right; 
    width: 796px; 
    height: 100%; 
    background-color: red; 
} 

Here is a live demo 클릭 'colorbox'다음 '쇼 왼쪽 DIV'

여기 내 스크립트입니다.

모두 감사합니다! :))))))

Answer 1

.left 및 .right이 .container이라고 가정하면 충분한 공간이 없기 때문에 푸시 다운되는 이유가 있습니다.

은 당신이 .container 그래서 아이들이 즉 .left 및 .right이 796px를 추가해야합니다에 대한 width:796px 설정했습니다. 현재 그들은 1052px까지 합쳐 지므로 한 쪽은 나란히 놓을 수 없으므로 아래로 밀려납니다.

EDIT : 아래 내용과 @ Matteo의 대답에서 언급 한 내부 컨테이너 방법을 사용하여 다음 CSS를 조정해야합니다.

.inner_container{ 
    width: 1396px; /* changed from 1052px */ 
} 
.right { 
    background-color: red; 
    float: left; /* changed from right */ 
    height: 100%; 
    width: 796px; 
} 

그것이 .left이 600px로 확장 될 때 769px에서 .right 아직도 옆에 들어갈 수 있다는 것을 충분히 커야해야하기 때문에 1396px가 있어야하는 이유. 그런 다음 .left과 .right 사이에 틈이 없도록하려면 float:left으로 변경해야하며 옆으로 밀면 계속 표시됩니다.

Answer 2

.container 안에 다른 div를 추가하면 .left 및 .right을 포함 할 수 있습니다.

http://jsfiddle.net/DRnRQ/

CSS :

.container { 
    width: 796px; 
    height: 300px; 
    background-color: yellow; 
    overflow:hidden; 
} 
.left { 
    float: left; 
    width: 256px; 
    background: green; 
} 
.right { 
    float: right; 
    width: 796px; 
    height: 100%; 
    background-color: red; 
} 
.inner_container { 
    width: 1052px; 
} 

MARKUP :

<div class="container"> 
    <div class="inner_container"> 
     <div class="left">a</div> 
     <div class="right">b</div> 
    </div> 
</div>