CSSによる3カラムレイアウト

解決済

質問者：noname#156193
質問日時：2010/02/16 20:20
回答数：1件

CSSによる3カラムレイアウト

以下のHTML(A)をCSSで(B)の様に表示させたいのですが、どの様にすると良いでしょうか？

HTML(A)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
省略
<body>

<div id="container">

<div id="wrapper">

<div id="content">コンテンツ</div>

</div>

<div id="header">ヘッダー</div>

<div id="navigation">ナビゲーション</div>

<div id="widget">ウィジェット</div>

<div id="footer">フッター</div>

</div>

</body>
</html>

表示(B)
|ヘッダー　　　　　　　　　　　　　　　　　　　　　|
|ナビゲーション｜コンテンツ｜ウィジェット|
|フッター　　　　　　　　　　　　　　　　　　　　　|

自分でも大分試行錯誤したのですが、思い通りの結果が得られません。
今のところは、コンテンツとナビゲーションをfloatで横並びにし、ヘッダー分の高さをmarginで下げて、ヘッダーはposition: absolute;で上部に表示させています。
ウィジェットが無い2カラムの状態ならそれで解決しているのですが、ウィジェットを追加して表示(B)の様に3カラムにしようとすると上手くいきません。
HTMLを変えれば他にやり様は思いつくのですが、containerとwrapperを除く要素の並びは(A)の通りで実現させたいです。
また、上記のソース自体あまりスマートではないのですが、もっとスマートなやり方があればそちらも指南頂けると幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2010/02/16 20:51

＞HTMLを変えれば他にやり様は思いつくのですが、

　そのとおり、そもそも文書木がおかしいから、CSSで配置しようにもうまく行かないのです。もちろん、無理やりabsoluteを使って配置はできますが、内容の伸縮や多様なウィンドウサイズに適合できなくなります。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_ … )］より
　もちろん、SEOの上からも好ましくありません。

本来は、
<body>
　　<div id="header">
　　　　<h1>タイトル</h1>
　　</div>
　　<div id="content">コンテンツ
　　　　<h2>見出し</h2>
　　　　<p>本文</p>
　　　　<div id="navigation">ナビゲーション</div>
　　　　<div id="widget">ウィジェット</div>
　　</div>>
　　<div id="footer">
　　　　<ul id="siteMap">
　　　　　　<li></li>
　　　　　　<li></li>
　　　　</ul>
　　</div>
　　</div>
</body>
とマークアップするべきではないですか？

　そうすると、ユーザーエージェントに依存しなくて、かつ検索エンジンも理解しやすい(SEO)サイトになると思います。

余談ですが
　contentsという複数形はないのでは(^^)、content自体、すでに内容物で複数の意味を持っているのではなかったっけ。
content 複数形 - Google 検索 ( http://www.google.co.jp/search?hl=ja&source=hp&q … )