cssでボックスの配置について。

質問

cssを使ったレイアウト作りでボックスを横並びにし、それぞれの横幅をピクセルで設定したいのですが、どのようなプロパティをどのように使用すればいいでしょうか。

回答No.3

goldfox · ベストアンサー

＞ずれてしまいますが、どうすればよろしいのでしょう。

#left{
floa:left;　…float:　に修正を。

id="clear"　はclass="clear"にするか、
.clear　のほうを#clear　に修正しましょう。

お礼

指示通りに修正したところ、ちゃんと表示されるようになりました。
どうもありがとうございます。

回答No.2

noname#19206

#1 furucch さんの素晴らしき事例を勝手ながらお借りしてちょっと手直し。
各ブラウザ間での表示具合を調整し、誤字も修正しました。多分コレで大丈夫だと思います。

<div id="wrapper">
<div id="left">左側の要素</div>
<div id="right">右側の要素</div>
<div id="clear"></div>
</div>
<div id="clear"></div>

#wrapper{
float : left;
}
#left{
float : left;
width : 500px;
}
#right{
float : right;
width : 500px;
}
.clear{
clear: both;
}

補足

修正ありがとうございます。
教えてもらいましたタグを書き換えてブラウザで確認したところ、
ボックスが
■
　　■
とずれてしまいますが、どうすればよろしいのでしょう。

<div id="wrapper">
<div id="left">左側の要素</div>
<div id="right">左側の要素</div>
<div id="clear"></div>
</div>
<div id="clear"></div>
#wrapper{
float:left;
width:760px;
}
#left{
floa:left;
width:210px;
height:100%
padding:10px;
margin:0;
}
#right{
float:right;
width:550px;
height:100%
padding:10px;
margin:0;
background:url(img/back4.gif);
}
.clear{
clear:both;
}

回答No.1

furucch

<div id="wrpper">
<div id="left">左側の要素</div>
<div id="right">右側の要素</div>
</div>

#wrapper{
float : left;
}
#left{
float : left;
width : 500px;
}
#right{
float : right;
width : 500px;
}

こんな感じでどうでしょう。
floatはテキストの回りこみを指定しています。

参考URL：

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

お礼

やはりfloatですか…。
記述の仕方がよくわからなかったもので、参考になりました。
ありがとうございます。