CSSで3つのdivを配置する

Question

なぞなぞが好きな人は誰ですか？;)

3 つの div があります。

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

menu-div を左の列に、login-div を右の列に、content-div も右の列にあるが、login-div の下に配置するように CSS スタイルを (HTML に触れることなく) 定義するにはどうすればよいでしょうか。

すべての div の幅は固定されていますが、高さは固定されていません。

Answer 1

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

なぜこの方法でしょうか?メニューがマークアップの最後に来ると大変になります。コンテンツとログイン権の両方をフローティングして、コンテンツにclear:rightを追加することもできますが、これが最善の策であると思います。全体像を見なければ、あなたのケースに確実に役立つ解決策を与えることは困難です。

---

編集：これも同様に機能するようです:

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

---

さらに考えてみます:列を中央揃えのレイアウトにしたい場合、絶対配置は機能しません (またはうまく機能しません)。float は機能するようです。float ソリューションでうまく機能するための列間の境界線タイプの要件を満たしている限り、それを選択したほうがよいでしょう。繰り返しになりますが、サイトが左揃えである必要がある場合は、絶対的な方法がニーズに非常に適していると思います。

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>