みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

CSSレイアウトの2カラム左メニューでコンテンツを先にHTMLに記述できる方法をおしえてください。

趣味でHPを作成しております。
一般的なCSSレイアウト2カラム左メニューにしたいのですが、
HTML部分で左メニューよりコンテンツを先に記述し、
CSSで左メニューで右にコンテンツがくるようにしたいです。

現在のCSSは


* {
margin:0;
padding:0;
}
.wrapper {
width: 750px;
margin: 0 auto;
}
.header {
width: 750px;
height: 100%;
}
.main {
width: 750px;
}
.menu {
float: left;
width: 200px;
}
.contents {
float: left;
width: 550px;
}
.footer {
clear: both;
width: 750px;
height: 100%;
}
.menu ul {
list-style: none;
}

このような記述です。
つづきましてHTML部分は

<body>

<div class="wrapper">
<div class="header">
ヘッダー部分
</div>
<div class="main">
<div class="contents">
コンテンツ部分
</div>
<div class="menu">
 メニュー部分
</div>

</div>
<div class="footer">
フッター部分
</div>
</div>
</body>

このような感じです。
しかしこれだとHTML部分はコンテンツが先にきておりますが、
メニューが右になってしまいます。
これをHTML部分を変えずにCSSでメニューを左に配置する方法はありますでしょうか?

1週間くらい試行錯誤したのですが、できませんでした。
お詳しい方教えてください。

投稿日時 - 2008-11-26 20:14:35

QNo.4509461

すぐに回答ほしいです

質問者が選んだベストアンサー

.contents の float に right を設定すれば、コンテンツは右に、メニューは左に配置されます。いかがでしょうか。

.menu {
float: left;
width: 200px;
}
.contents {
float: right;
width: 550px;
}

投稿日時 - 2008-11-26 21:22:03

お礼

やってみたらできました!

今までfloatの意味がわからなかったのですが、
これって寄せて回り込ませるって意味だったんですね。

ありがとうございました。

投稿日時 - 2008-11-27 11:39:43

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問