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.

'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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.