cssで横にテキストとその背景を並べる方法を教えてください。

cssで横にテキストと背景を並べる方法を教えてください。
下記のようなCSS記述と、HTMLタグがあります。

【CSS】
#menu01 {
width:210px;
height:30px;
background-image: url(http://abc.com/img/123.gif);
background-repeat:no-repeat;
font-size:12px;
font-weight:bold;
flort:left;
}

【HTML】
<div id="menu01">「ここにメニュー内容が書かれています」</div>
<div id="menu01">「ここにメニュー内容２が書かれています」</div>
<div id="menu01">「ここにメニュー内容３が書かれています」</div>
<div id="menu01">「ここにメニュー内容４が書かれています」</div>

このように書くと、左に寄って縦にずらりとメニューが並びます。（右側は空白になってしまいます。）

現状
□
□
□
□

という風に並ぶ上記メニューを、
□□
□□

という感じで並べたいのですが可能でしょうか。

制約としては、MTで書き出されるものなので、メニュー毎にidを変えるなどはできません。。
また、display:inline;なども使ってみましたが、何故か重なってしまい（文字は重なりません）、
思っているものにはなりません。。

本当に分かりません！よろしくお願いします！

No.2 回答者： Muller3 回答日時： 2007/08/30 21:41

＞MTで書き出されるものなので、メニュー毎にidを変えるなどはできません

HTMLではなく、テンプレートのその部分の記述を示した方がいいかも。
<MTEntries>
<div id="menu01"><$MTEntryBody$></div>
<MTEntries>
みたいな記述になっているんでしょうか？
だとしたら、#1のご回答にあるとおり、MTEntriesは繰り返しますので、idの部分はclassにした方がいいと思います。classなら何度出てきても大丈夫なので。

そいでもって、floatの綴りが違いますが…

この回答への補足

すみません！お礼の後、もう一度やってみたらできました！
本当に助かりました！皆様最高だと思います。

ありがとうございます！

補足日時：2007/08/31 08:47

この回答へのお礼

ありがとうございます。記述を書きますと、仰る通り
<MTEntries><div class="menu01"><$MTEntryTitle$></div></MTEntries>
です（idをclassに修正しました）。

あとfloatの綴りも直したのですが、やはり
□□
□□
のようには並んでくれませんでした。。

無理なのでしょうか。。

お礼日時：2007/08/31 08:46

No.1 ベストアンサー 回答者： noname#39970 回答日時： 2007/08/30 21:11

idは文書内唯一でなければならない。

このような場合はidではなくclassを用いる

#menu01
↓
.menu01

div id="menu01"
↓
div class="menu01"

横並びを区切る場合は必要な場所に
<div style="clear:both"></div>
を挟む。

この回答への補足

> idは文書内唯一でなければならない。
そうでした…。ありがとうございます！勉強になりました！

> <div style="clear:both"></div>
これは知りませんでした。しかしながらMovableTypeなのでdivが自動でメニュー分だけ吐き出され、
HTMLのタグは触れないんです…。

参考にさせて頂きます！ありがとうございます！

補足日時：2007/08/30 21:27