css - float を使用したスタイル マークアップ

Question

このマークアップを考えると、

<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>

#header {
  no styles at all
}

#content {
  float: left;
}

#sidebar {
  float: right;
}

マークアップを変更せずに CSS フロートを使用して div を配置するにはどうすればよいですか?

Answer 1

このフィドルを試してください：http：//jsfiddle.net/PZkeh/

Pēterisの回答margin-topに関しては、＃headerに厳密に依存しheight、ウィンドウのサイズ変更で非常にうまく機能するネガを定義する必要はありません。

このレイアウトを作成するための主なCSSルールは次のとおりです。

#sidebar { 
    position: absolute; 
    right   : 0; 
    top     : 0;
    width   : 100px;
    min-height: 150px; 
}

body {
    position: relative; /* not necessary if you apply this style to the body */
    padding-right: 120px;
    min-width: 300px; /* this should be adjusted to contain sidebar + header width */
}

Answer 2

このようなスマートが必要ですか？

http://jsfiddle.net/JVJ9Q/2/