Twitter Developersのように画面端まで背景を表示したい

Twitter Developersのようなレイアウトを実現したいです。
Twitter Developersでは真ん中のコンテンツは最大幅が固定されているのにもかかわらず、画面端まで背景が表示されています。不思議に思い検証してみたところ、どうやらコンテンツよりも浅い階層で、3000px * 1pxほどの2色に色分けされた横に細長い背景画像をy方向に繰り返しているようなのです。なるべく画像を使うのは避けたいと思っています。画像を使わずに下図のようなレイアウトは可能でしょうか。また、もし画像を使うことでしか実現できないのであれば、どのようにして背景画像とコンテンツの位置を揃えたらよいのでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のようにしたらどうでしょうか。
左右にボックスを用意して、その中でそれぞれmax-widthを持つボックスを中央に寄せています。
（以下の例では、中のボックスは便宜上色を変えています。）

HTML
1<!DOCTYPE html>
2<head>
3<style>
4* {
5	margin: 0;
6	padding: 0;
7}
8#a {
9	float: left;
10	width: 30%;
11	background-color: #1d14fa;
12}
13#b {
14	float: right;
15	width: 70%;
16	background-color: #3ea4fd;
17}
18#aa {
19	max-width: 300px;
20	margin: 0 0 0 auto;
21	background-color: #ddd;
22}
23#bb {
24	max-width: 600px;
25	margin: 0 auto 0 0;
26	background-color: #aaa;
27}
28</style>
29</head>
30<body>
31<div id="a">
32	<div id="aa">left</div>
33</div>
34<div id="b">
35	<div id="bb">right</div>
36</div>
37</body>
38</html>