2 개의 중첩 된 divs 나란히 나란히

Question

나는 이것이 전에 부탁 받았지만, 나는 그것을 깰 수없는 것, 그리고 나는 경험 한 누군가가 내가 그것을 해결할 수있는 것보다 훨씬 빨리 나의 실수를 발견 할 수 있다고 확신한다. .

HTML : http://sas98.user.srcf.net/guestbuzz/index.php

CSS : http://sas98.user.srcf.net/guestbuzz/style.css

의 오른쪽은 오른쪽에 정렬되도록 I 양식의 오른쪽에 있지만, 컨테이너에 앉아 오른쪽 상자를 싶습니다 네비게이션 바의 손 쪽.

대단히 감사드립니다.

Answer 1

div의 블록 모델을 이해하십시오. 사용할 수있는 전체 너비가 필요합니다. 이 작동 방식 :

.container { 
    width: 1000px; 
    margin: 0px auto; 
    /*display:table;*/ 
    position:relative; 
} 

    #left { 
     width: 600px; 
     display:inline-block; 
     /*float:left;*/ 
     position:absolute; 
     left:0; 
    } 

    #right { 
    background-color:rgba(0,0,0,0.2); 
     -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
      -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
      -o-box-shadow: 0 0 10px rgba(0,0,0,0.1); 
       box-shadow: 0 0 10px rgba(0,0,0,0.1); 
     width: 400px; 
     border-radius: 3px; 
     display:inline-block; 
     /*float:right;*/ 
     position:absolute; 
     right:0; 
    } 

주석 처리 된 줄은 작동하는 또 다른 방법입니다.

내가 뭘 했니?.

1. 컨테이너 만들기,이 div의 절대 위치에있는 자식은이 위치에 상대적으로 배치됩니다.
2. make display : 인라인 블록; 왼쪽과 오른쪽 블록, 그래서 그것은 필요한 너비와 dont 취소하거나 서로 겹칩니다. 너비를 설정하는 경우에는 필요하지 않습니다.
3. 오른쪽에서 왼쪽으로 0으로 오른쪽 위치를 만들고 왼쪽에서 0으로 만듭니다.

UPDATE

지금 가장 좋은 방법은 block formatting context을 실행하는 데라고 생각합니다. #left을 왼쪽으로 flood하고 #right으로 만들거나 overflow:auto; 대저택이나 눈에 보이는 것 이외의 다른 것을 지정하십시오. IE6에서는 hasLayout이라는 것을 트리거 할 필요가 있으므로 부인에게주세요.