floatした空要素の幅設定(width)が効かない!!治し方と理由

floatした空要素にwidthが効かない！

floatした空要素にwidthが効かず幅がきちんと反映されない症状の治し方と理由を紹介しますね。cssに一行追加するだけでカンタンに治せますよ！

1. floatした空要素にwidthが効かない！
2. そもそもやりたい事
3. floatしている空要素に「min-height:1px;」を追加するだけ！
4. heightのない要素のwidith指定は無効！
5. floatとwidthとmin-height：まとめ

そもそもやりたい事

ワードプレスでブログを作っている場合なんかだと、次の記事に進む「次へボタン」と前の記事に戻る「前へボタン」は前後の記事があるかどうかで表示/非表示を自動で判別してくれますよね。

でも勝手に「前へボタン」を消されてしまうと下みたいに「前へボタン」のwidthがなくなっちゃってその分「次へボタン」が左に詰められてしまいます。

今回はその治し方です。

floatしている空要素に「min-height:1px;」を追加するだけ！

対策はとてもカンタンで”floatしている空要素に「min-height:1px;」を追加するだけ”です。

<div style="float:left; width:50%;"></div>
<div style="float:left; width:50%;">次へ</div>

そこで以下のように「min-height:1px;」を追加してあげます。

<div style="float:left; width:50%; min-height:1px;"></div>
<div style="float:left; width:50%; min-height:1px;">次へ</div>

こんな風に「min-height:1px;」を追加するだけで大丈夫！

heightのない要素のwidith指定は無効！

htmlの仕様として高さ（height）のない要素にwidthを指定しても無効にになってしまいます。これはfloatしているかどうかは関係なくどんな要素でもそうなっています。

いつもは要素の中には何かしら文字が入っているからブラウザが高さ（height）を自動計算してくれています。でも空要素だとブラウザが知らんぷりしちゃうから自分でheightを設定してあげなくちゃいけない。かなり盲点ですよね。

「min-height:1px」にしているのは一番影響を小さくするためで「10px」でも大丈夫ですし、min-heightじゃなくてheightでもちゃんとwidthは有効になります。

※heightやmin-heightではなくborderを空要素に設定してあげるだけでもwidthは有効になります。

floatとwidthとmin-height：まとめ

floatした空要素の幅がなくなってしまう場合の対策方法とその理由を紹介しました。

今までは「 」を各空要素内に含める方法しか知らず、こんな風にcssだけで、しかも一行追加するだけで治せるとは知りませんでした。

「min-height:1px;」を追加するだけだったら他のデザインへの影響もないに等しいですし、ぜひ参考にしてみてくださいね。