CSS와 3 개의 DIV를 포지셔닝합니다

Question

수수께끼를 좋아하는 사람은 누구입니까? ;)

나는 세 개의 div가 있습니다 :

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

CSS 스타일 (HTML을 터치하지 않고)을 왼쪽 열로, 오른쪽 열의 로그인-디브 및 내용 div도 오른쪽 열이지만 로그인 div 아래에있는 CSS 스타일을 어떻게 정의합니까?

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

Answer 1

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

왜 이렇게? 마크 업에서 마지막으로 나오는 메뉴는 힘들게 만듭니다. 콘텐츠와 로그인을 올바르게 떠올리게 할 수도 있고 명확한 콘텐츠를 추가 할 수 있지만 이것이 최선의 방법이라고 생각합니다. 더 큰 그림을 보지 않으면 서, 당신의 경우에 확실히 작동하는 솔루션을 제공하기가 어렵습니다.

---

편집 : 이것은 또한 작동하는 것 같습니다.

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

---

더 많은 생각 : 중앙 레이아웃에 열을 갖고 싶다면 절대 포지셔닝이 작동하지 않거나 잘 작동하지 않습니다. 플로트는 작동하는 것 같습니다. 플로트 솔루션으로 팬을 펼치기 위해 테두리 중간의 컬럼 유형 요구 사항을 얻을 수있는 한,이를 선택하는 것이 좋습니다. 그런 다음 사이트를 정렬 해야하는 경우 절대 방법이 귀하의 요구에 매우 효과적이라고 생각합니다.

Answer 2

떠 다니고 있습니다 ... 완벽하지 않습니다. 크리스의 대답 더 나은 해결책 인 것 같습니다.

#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>