float:left ウインドウを狭めると改行されてしまう

Question

ウインドウを狭めると全体も小さくなって表示するようにしているのですが、
下のような感じで書くと、bbbの部分が改行されてしまい、ここの部分だけうまく行きません。
どのようにしたらうまく行きますでしょうか。ご教授ください。よろしくお願いします。

<div style="float:left;width:150px;border:1px solid;">aaa</div> <div style="float:left;width:150px;border:1px solid;">bbb</div> <div style="clear:both;"></div>

Answer 1

width:150px のように 固定幅 にしているからウィンドウを狭めると｢収まり切らなくなる」為に改行されてしまうのだと思います。
ですから、幅を width:50% のように相対値で指定してはいかがですか？

とはいえ、この方法ではウィンドウの幅が広がると対象のブロック要素も際限なく広がってしまうので、幅の上限を決めておくことも出来ます。

[幅の最大値を指定する](http://www.htmq.com/style/max-width.shtml)

Comments

[退会済みユーザー]

ありがとうございます。
%指定でやってみたのですが、なぜかあるタイミングで改行されてしまいます・・・、
divの中に入っているタグのcss設定がおかしいのでしょうか。

Answer 2

古いブラウザを考慮しないのであれば「display:table;」をお試しください。

例）

<div id="wrap">
<div class="content">content-01</div>
<div class="content">content-02</div>
</div>

#wrap{
display:table;
table-layout:fixed;
width:100%;
}
#wrap .content{
display:table-cell;
vertical-align:top;
}

「#wrap」を「table」として扱い、「.content」を「td」として扱うようなイメージです。