CSS - HTML - 2 float columns

Question

I've run into a problem.

My code now:

<div style="width: 500px; margin: auto; border: 1px solid black;">
   <div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div>
   <div style="float: left; margin-left: 20px; border: 1px solid black;">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div>
   <div style="clear: both;"></div>
</div>

And it seems like this now:

When the word in the second div is as short as can be placed after the first div, it's in one row, like this:

My goal is to get this design, when the decond div is longer. I'm not allowed to use WIDTH and FLOAT: RIGHT because the inner divs have to de dynamic!

Like this (PhotoShop):

Thanks for the help in advance!

Answer 1

Is this what you looking for

I removed the float:left from the second inner div and increased the margin.

<div style="width: 500px; margin: auto; border: 1px solid black;">
<div style="float: left; border: 1px solid black;"><b><u>TEST</u></b></div>
<div style=" margin-left: 60px; border: 1px solid black;">A A A A A A A A A A A A A A A A     A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A       </div>
<div style="clear: both;"></div></div>

Hope this helps

Answer 2

No width allowed ? OK here is a try:

AFAIK you can't do that with float without having a few width properties. Same with relative positioning of a "column": you still need a width and margin-left on the second column.

A solution is using CSS display: table; and table-cell (nope, not HTML table ;) ). It's as flexible as you want.
http://dabblet.com/gist/1717860 will show you an example (HTML is separated from CSS, an id was added for clarity but isn't really needed and deprecated element u was removed and b replaced by strong. But CSS font-weight: bold; would be better, without context)

#main {
  display: table;
  width: 500px;
  margin: auto;
  border: 1px solid blue;
}

#main > div {
  display: table-cell;
  border: 1px dashed black;
  padding: 1em;
}


#main > div + div {
  padding-left: 20px;
}

EDIT: compatibility IE8+
display: inline-block; is a good fallback for IE6/7. Well display: inline; zoom: 1; in fact, as IE6/7 doesn't understand the inline-block value but can achieve the same with inline+hasLayout)