cssでテキストを内容ごとに３つ横並びにしたいのですが、floatなど

質問

cssでテキストを内容ごとに３つ横並びにしたいのですが、floatなどではうまくいかずこまっています。
２カラムのレイアウトにしたあとに、テキストを横並びに３つしてみたいというような感じです。
リストタグを使ってレイアウトするべきでしょうか？
この場合、<div>タグの中にIDを設定してもうまくいきません。
初心者なので、なにかよい方法があったら教えてください。
レイアウトのイメージは添付画像にしてあります。黒い四角のところがテキストのまとまりだと考えてください。

回答No.2

noname#119957 · ベストアンサー

100ＰＸの３列横並び。。

ＨＴＭＬ

<div id="box_3">
<div id="box1">aaa</div>
<div id="box2">bbb</div>
<div id="box3">ccc</div>
<br /><!--clear-both-->
</div>

ＣＳＳ

*{
margin: 0px;
padding: 0px;

}
#box_3 {
clear: both;
width: 300px;
}
#box_3 #box1 {
float: left;
width: 100px;
background-color: #CCCCCC;
}
#box_3 #box2 {
float: left;
width: 100px;
background-color: #999999;
}
#box_3 #box3 {
float: right;
width: 100px;
background-color: #CCCCCC;
}
#box_3 br {
font-size: 1px;
line-height: 1px;
display: block;
margin: 0px;
padding: 1px;
clear: both;
height: 1px;
width: 1px;
}

とりあえずです。

こういう段組ができないなら、clear fixについて検索したほうがいいですよ。

お礼

回答ありがとうございます。
早速ためしてみました。いただいたソースどおりにやってみました。
あんなに悩んでいたのにすんなりできました。
本当にありがとうございます。
いろんな書籍を読んでみても、自分のわからないことがピンポイントでのっているわけではないので手探り状態で苦労していました。

回答No.1

rurino

◆HTML

<div id="wrapper">

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

<div id="nav">左ブロックの中身</div>

<div id="main"><!--ここから右ブロックの中身--></div>

<div class="l410">
　　<div class="l200">左カラム</div>
　　<div class="r200">中カラム</div>
</div><br class="clear" />
<div class="r200">右カラム</div><br class="clear" />

<!--右ブロックの中身ここまで--></div>

</div>

◆CSS

#wrapper { width: 840px; margin: 0 auto; }
#header { }
#nav { width: 200px; float: left; }
#main { width: 620px; float: right; }
.l410 { width: 410px; float: left; }
.l200 { width: 200px; float: left; }
.r200 { width: 200px; float: right; }

.clear { clear: both; }

という感じでしょうか…数字は適当に入れたものなので、実際にあわせて変更してください。

お礼

参考になりました。ありがとうございます。
自分のわからないことが、参考書などをよんでもわからず、こまっていました。
わからないでいたもやもやがとれてすっきりしました。
本当にありがとうございます。