Question

If two divs are floated in a table cell, and the text are short, they float nicely on the same level.

But when the second div has longer text, the 2 divs now don’t float on the same level.

Why is that and how to make it work, without specifying a hard-coded width for the 2nd div? (because dynamic width is needed if other table cells are wider or not as wide)

A code example is in:
http://topics2look.com/code-examples/two-floats-in-a-table/

The first hello is floated left (it actually is supposed to be an image of + or - using CSS image sprite, but just made simple here). The “world world” is supposed to be the description and float nicely next to the image.

So the first table is all ok. But in the second table, it has “world world world … world” and is quite long. Now the second div will not float next to it but will float under the first float. Is there a way to make it shrink wrap better so that it floats nicely next to the first div?

Answer 1

don’t float the second div, then add overflow: hidden; (or auto) to it to make is anew block formatting context, should achieve what you need:

CSS:

body { 
   font: 16px Verdana, sans-serif;
}

#main-content { 
   width: 600px; 
   border: 6px double black; 
   margin: 20px 0;
}
table { 
   border: 6px double orange;
}

table div { 
   float: left; 
   padding: 4px;
}

table div+div {
   float: none; 
   overflow: hidden;
}

HTML:

<table>
   <tr>
      <td><div>hello</div> <div>world world world world world world world world world</div></td>
      <td><div>hello</div> <div>world world world world world world world</div></td>
   </tr>
</table>