divタグ？

質問

わからないので質問させてください。
http://www.dmm.com/のサイトのような左の位置に
サービス一覧などがあり、すぐ隣(中央)にデータなどが
表示されていると思います。
似たようなものが作れるように勉強しているのですが
うまくいきません…。

左の位置にサービス一覧などが表示され
左のサービス一覧のデータが表示された後に
中央にデータが表示がされてしまいます。
以下がソースになります。

#info{
width:722px;
border:1px solid black;
}

<div id="info">
<div>
<div align="left">
<ul>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
<li>あいうえお</li>
</ul>
</div>

<div align="center" id="info3">
<input type="image" src="jpg/001.jpg" alt="1">
<input type="image" src="jpg/002.jpg" alt="1">
<input type="image" src="jpg/003.jpg" alt="1">
<input type="image" src="jpg/004.jpg" alt="1">
<br>
<input type="image" src="jpg/001.jpg" alt="1">
<input type="image" src="jpg/002.jpg" alt="1">
<input type="image" src="jpg/003.jpg" alt="1">
<input type="image" src="jpg/004.jpg" alt="1">
</div>
</div>
</div>

もしよろしければご教授お願い致します。

回答No.1

SAYKA · ベストアンサー

cssの出番だね。
タグにあるalignを使うのではなく、floatを使って横にblock要素が並んでくれるように指定するとできるよ

http://www.tohoho-web.com/css/reference.htm#float

お礼

メッセージありがとうございます。

やっと出来ました。こんな感じでやってみました。

<div align="left"> を <div id="info9">に変更し
cssに以下を追加しました。

#info9{
margin:0;
padding:0;
float:left;
border:1px solid black;
height:280px;
}

この書き方で正しいのかわからないですが
とりあえずできました。

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