ヘッダーとフッターの横幅をウィンドウいっぱいに広げた固定幅レイアウト

Web サイトのレイアウトには、リキッドレイアウトやフレキシブルレイアウト、グレッドレイアウトなどいろいろあります。
今回は、このブログのように固定幅だけどヘッダーとフッターの背景をブラウザいっぱいに広げるサンプルです。

[adsense1]

big-header-fixed-layout01

このようなイメージで、#wrapper #header #contents #footer の横幅を 100% にします。
.inner の横幅は 960px にして、中央寄せします。

デモサイトを作りました

http://monolio.com/dev/sample/sample01.html

CSS

#wrapper, #header, #contents, #footer {
    width: 100%;
}
#header .inner, #contents .inner, #footer .inner {
    width: 960px;
    margin: 0 auto;
}
#wrapper {
    min-width: 960px;
}
#main {
    float: left;
    width: 630px;
}
#sidebar {
    float: right;
    width: 300px;
}
#footer {
    clear: both;
}

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>固定幅レイアウトのサンプル</title>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div class="inner">
            <p>header</p>
        </div>
    </div>

    <div id="contents">
        <div class="inner">
            <div id="main">
                <p>main</p>
            </div>

            <div id="sidebar">
                <p>sidebar</p>
            </div>
        </div>
    </div>

    <div id="footer">
        <div class="inner">
                <p>footer</p>
        </div>
    </div>
</div>

</body>
</html>

[adsense2]

1 thought on “ヘッダーとフッターの横幅をウィンドウいっぱいに広げた固定幅レイアウト

  1. ピンバック: 自作したWordpressのテーマに変更しました | 電気通う

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください