4


3

次のDIVがあるとします。

ページヘッダーメインコンテンツサイドバーコンテンツページフッター

サイドバーのDIVをメインのDIVの右側に配置して、たとえば全幅の20%に設定するには、どうすればよいですか。

また、4つのDIVの間に余裕を持たせて、レイアウトが狭くなりすぎないようにします。

それはそのろくでなしのIE6を含む、 "すべての"ブラウザで動作したいのですが…​

6 Answer


3


メインとサイドバーをラッパーに入れると、ラッパーのサイズ/位置を設定してレイアウトを維持できます。

#top {/ * top stuff * /} #wrapper {width:800px;マージン:0px auto。 / *ページの中央に位置する* /} #main {float:left;幅:80%。右マージン:10px。 #sidebar {float:left;} / *ここで左にフローティングにすると、マージンをより細かく制御できます* / width:20%; #bottom {/ *一番下のもの* /}


0


float、負の` margin`、 `padding`を使ってください。

あなたはページレイアウトについてhttp://alistapart.comで良いチュートリアルを見つけることができます(私は本当に_聖杯_をお勧めします)そしてそれはまたクロスブラウザの問題をたくさん扱っています


0


試してください:

html、body、div {margin:0;パディング:0。ボーダー:0なし。 } / *プリミティブリセットCSS * / #main {float:left;}幅:80%。 #sidebar {float:right;}幅:20%。 #bottom {clear:both;} }

境界線、余白、パディングなどの異なるブラウズには異なるデフォルト値があるため、このようなことには リセットCSS(他のものもあります)を使用することが重要です。 。


0


ページヘッダ

メインコンテンツサイドバーの内容

ページフッター

#top、#main、#bottom {float:left;クリア:両方幅:100%。マージンボトム:1em。 #sidebar {float:right;}幅:20%。 #content {float:right;} }


0


doc typeをstrict、alaに設定することは非常に重要です。

こうすれば、(いくつかの例外を除いて)CSSをクリアする必要はなく、単に正しいボックスモデルを使用できます。


0


この記事へのリンクで私自身の質問に答えます。