ＣＳＳについて教えてください

質問

ＣＳＳについて教えてください。二段組のボックスにおいて、左側が固定している場合、右側のボックスはfloat:right;にしてもfloat：left,にしてもどちらでも問題ないですか（左右の幅をきっちりとった場合）？？？ボックスを右寄せに指定しても、左寄せに指定しても・・・同じ幅であれば同じポジションになるはずですよね？

回答No.2

naokita · ベストアンサー

#1さんの話じゃないけど、
段組みでのfloatボックスは、一般的に多く利用されていますのでご安心を。

計算通りピッタリな場合は、
隙間が無いはずなので、leftもrightも同じですよ。

リキッドで、
段落ちした場合には、指定方向に寄ってしまう場合がありますけどね。

腐ったブラウザやDTDによっては、別の原因で崩れる事があります。

お礼

誠に有難うございます、なぞが出てきて困ってしまいます。トホホです・・・・

回答No.1

ORUKA1951

floatは、本来ボックスを二段組するためのものではありませんよ。
　⇒9.5 浮動体（Floats）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#floats )
　ボックスの配置に使用するのは、ウィンドウ幅が広いときはたくさん並べて、狭くなると数を減らして下に回す・・と言うような用途に使用します。
<ul class="photoList">
　<li><img src="" width="" height="" alt="">
　　　<p>画像の説明</p>
　</li>
　<li><img src="" width="" height="" alt="">
　　　<p>画像の説明</p>
　</li>
・・・・に対して、
ul.photoList,ul.photoList li{
list-style-type:none;
display:block;
margin:0;padding:5px;
}
ul.photoList li{
width:200px;height:200px;
float:left;
}
のように・・

本文中の目次を右に固定するなら
<div class="section">
　<h2>本文見出し</h2>
　<div class="section">
　　<h3>見出し</h3>
　　<p>記事</p>
　</div>
　<div class="section">
　　<h3>見出し</h3>
　　<p>記事</p>
　</div>
　<div id="contentTable">
　　<h3>目次</h3>
　　<ol>
　　　<li>・・</li>
　　</ol>
　</div>
</div>

div.section{position:relative;}
div.section div#contentTable{
position:absolute;top:0;left:0;
width:200px;
}
div.section div.section,div.section div.section h2{
margin-left:210px;
}
ですむはずです。ウィンドウ幅がどのように変化しても、先でデザインを変えることも、自由に・・

＞左側が固定している場合、
　fixed(ウィンドウに対して固定)か、absolute(static以外の直近の親コンテナブロックに対して固定)だと思いますが・・
　そもそもfloatさせる必要はありません。ブラウザによると、思わぬ回り込みが起きたりして泣かされることになります。floatを指定すべきではありません。