片方だけ横幅を設定してfloatする方法
横並びの要素があるとき、その一方だけ横幅を指定して、もう一方の横幅は指定せず【auto】にしたいときの記述方法です。
以下の要素があったとして【コンテンツA】の横幅だけを指定してみます。
<div id="out_box">
<div id="a">コンテンツA</div>
<div id="b">コンテンツB</div>
</div>
CSSで以下の様に定義してやりましょう。
#out_box {
overflow: hidden;
}
#a {
float: left;
width: 300px;
background: #999;
}
#b{
margin-left: 300px;
background: #ccc;
}
ポイントは以下の部分です。
- 横幅を設定したいブロックだけにfloatを設定する。
- 横幅を設定しないブロックはfloatを設定せず、上記ブロックの横幅の分だけmarginをとる。
- marginを横幅より大きく取ればブロック間にスペースを設けることができる。
まとめ
片方だけ横幅を設定してfloatする方法をご紹介しました。
以前に携わった案件で参考にした内容ですが、どの様な場面で必要だったのか思い出せません。
今回の内容を見て「これだ!」と思われた方は、ぜひ参考にしてください。
コメントを残す