パンプキンスパイスラテ

IT系のことが多めの日記帳です

cssのfloatプロパティについてのメモ

ハマったので今後のためにメモしておく。

やりたいこと

2つのブロック要素を右に寄せて横並びにさせたい。

イメージ


<p>A要素</p><p>B要素</p>

はじめにやったこと

XHTML

<div>
<p class="type_A">A要素</p>
<p class="type_B">B要素</p>
</div>

css

p.type_A{
  float: right;
}
p.type_B{
  float: right;
}

floatプロパティでA要素を右へ、B要素をさらに右へ並ばせられるかと思ったんだけど、ダメだった。
↓表示結果


<p>B要素</p><p>A要素</p>
何故かXHTMLの順番と並び順が違ってしまった!
どうやら、floatプロパティは、「float:left」と指定すると要素は左から詰めていき、「float:right」と指定すると要素は右から詰めていくらしい。
そのため、上記のような表示になってしまった。
単純にXHTMLの順番を入れ替えれば、理想の表示ができるけど、ちょっと気持ちが悪い。

親の要素にfloat:right

そこで、親のdivをfloat:rightさせてから、中の要素をfloat:leftで左詰めにすることで、実現できた!!
xhtml

<div>
<p class="type_A">A要素</p>
<p class="type_B">B要素</p>
</div>

css

div{
  float: right;
}
p.type_A{
  float: left;
}
p.type_B{
  float: left;
}

表示結果


<p>A要素</p><p>B要素</p>
要素を右に寄せてfloatさせるのがこんなに難しいとは思わなかった。。。