FBと同様のレイアウトを定義するのにCSS + HTMLを使用する方法に関する良いチュートリアルを知っていますか？FBや同様のサイトのようなCSSとページレイアウト
私は、それぞれの側に1つの列を持つ幅が約700pxの本体として、100％のヘッダーと次に中央の列を持つ方法の良い例を探しています。
更新日：私がdiv要素とCSSレイアウトを理解しようとしないのです
。一方的な方法か一般的な方法があるかどうかを確認しようとしています
私は（FBをexmapleとして使って）興味を持っています。どのように水平な背景を持つことができ、 3列に並んでいるか、中央に並んでいます。
はHTMLです：
<html>
<head>
<link rel="styleSheet" href="style.css" type="text/css">
</head>
<body>
<div id="header">Hello</div>
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
<div id="sidebar-right">Right</div>
</body>
</html>
、これはCSSです：
body, html{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#header{
width: 100%;
padding-left: 200px;
height: 50px;
background: #0000FF;
}
#sidebar{
float: left;
width: 200px;
height: 100%;
background: #FF0000;
}
#content{
float: left;
width: 700px;
height: 100%;
background: #00FF00;
}
#sidebar-right{
margin-left:900px;
height: 100%;
background: #FFFF00;
}
まず、ページの幅になるラッパークラスを定義します。マージンをauto（少なくとも左右にある）に設定すると、ページの中央に配置されます。あなたは700pxので、言った：
.wrapper
{
width: 700px;
margin: auto;
}
今、あなたはあなたの3つの列、真ん中に1つ、各側に1つを必要としています。あなたができる
#header
{
width: 100%;
}
そして：今すぐ100％幅のヘッダを追加し
#left
{
width: 100px;
float: left;
}
#middle
{
width: 400px;
float: left;
}
#right
{
width: 200px;
float: left;
}
：このような何かを行う、（物事を明確にする）左右のサイズが同じでないと仮定すると、そのようなセットアップページ：あなたが見ることができるので、ここで
<div id="header">
<div class="wrapper">
Your header here
</div>
</div>
<div class="wrapper">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
は、彼らがどこにあるか、各divの上の任意の背景色と、この例である：
これは単なる例ですが、うまくいけばうまくいくでしょう。ここで
http://twitter.github.com/bootstrap/ –
あなたはドン場合、これは、本当に簡単です」 CSSをレイアウトする方法を知っています。チュートリアルの具体的なレイアウトに固有の、本当ですか？ –
私はそれを正しくやっていて、他のデザイナーがそれをやっているのを見ているだけで不思議でした。 – Arcadian