I want a web page with two divs. The first one will be 160 pixels wide and float to the left. The second will be unlimited width and float left, alongside the first. Here is some crude ascii art that probably won't format right, but you get the idea of it:

.......... ............
.DIV1 . . DIV 2.
.......... ............

What I have looks something like this:

.foo {
   float: left;
   width: 160px;
.bar {
  float: left;
<div class="foo">foo text</div>
<div class="bar">bar text</div>

This works fine as long as only a small amount of text is in the second div. If the second div has enough text to cause a wrap, then the second div will appear below the first div instead of appearing to the right of it.

8 Years
Discussion Span
Last Post by ko ko

'float' needs exact width. The second 'div' has no width. It means that the width is auto. If your resolution is '1024', so the browser width might be '1000px'. The first 'div' is '160px', so the space for the next float element would have '860px'. The content is more than '860px' wide and it force to the new line. You can read here more about float.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.