css로 세 div를 배치

Question

누가 수수께끼를 좋아합니까? 나는 왼쪽 열 오른쪽 열에서 로그인-DIV로 메뉴 사업부를 가지고) HTML을 건드리지 않고 (CSS 스타일을 정의 할 방법

<div id="login" /> 
<div id="content" /> 
<div id="menu" /> 

:)

나는 3 명 div의이 content-div는 오른쪽 열에 있지만 login-div 아래에도 있습니다.

모든 div의 너비는 고정되어 있지만 높이는 고정되어 있지 않습니다.

Answer 1

#menu { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100px; 
} 
#content, #login { 
    margin-left:120px; 
} 

왜 이런 식입니까? 마크 업에서 마지막으로 오는 메뉴는 힘들게 만듭니다. 또한 콘텐츠와 로그인 권한을 모두 띄울 수 있고 콘텐츠에 명확한 권한을 추가 할 수도 있지만 이것이 최선의 방법이라고 생각합니다. 더 큰 그림을 보지 않고도 자신의 경우에 꼭 맞는 솔루션을 제공하는 것은 어렵습니다.

---

편집 :

#content, #login { 
    float:right; 
    clear:right 
} 

---

더 많은 생각을 : 당신이 중심 레이아웃의 열을하려는 경우 절대 위치가 작동하지 않습니다 (또는 잘 작동하지 않습니다)이뿐만 아니라 작동하는 것 같다 . float가 작동하는 것처럼 보입니다. float 솔루션을 사용하여 경계선 유형 요구 사항을 얻을 수있는 한 그 선택을 해제하는 것이 좋습니다. 그런 다음 사이트가 왼쪽으로 정렬되어야한다면 절대적인 방법이 필요에 따라 잘 작동한다고 생각합니다.

Answer 2

떠 다니고 ... 완벽하지 않습니다. Chris's answer이 더 좋은 해결책 인 것 같습니다.

#login { 
 
    float: right; 
 
    width: 400px; 
 
    border: 1px solid #f00; 
 
} 
 

 
#content { 
 
    clear: right; 
 
    float: right; 
 
    width: 400px; 
 
    border: 1px solid #f00; 
 
} 
 

 
#menu { 
 
    float: left; 
 
    width: 400px; 
 
    border: 1px solid #f00; 
 
}

<div id="login">Login</div> 
 
<div id="content">Content</div> 
 
<div id="menu">Menu</div>