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

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

No.2 ベストアンサー 回答者： noname#119957 回答日時： 2010/05/20 01:12

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について検索したほうがいいですよ。

この回答へのお礼

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

お礼日時：2010/05/20 23:26

No.1 回答者： rurino 回答日時： 2010/05/20 00:59

◆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; }


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

この回答へのお礼

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

お礼日時：2010/05/20 23:31