CSS - HTML-2 float columns

Question

I have a problem.

My code is:

<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;">AAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAA </div> <div style="clear: both;"></div> </div> 

Now it looks like this:

When the word in the second div is as short as can be set after the first div, it is on the same line, for example:

My goal is to get this design when the div dec div div is bigger. I am not allowed to use WIDTH and FLOAT: RIGHT , because the inner divs must be dynamic!

How is it (PhotoShop):

Thanks for the help in advance!

Answer 1

This is what you are looking for

I removed the float: to the left of 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;">AAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAA </div> <div style="clear: both;"></div></div> 

Hope this helps

Answer 2

Is width allowed? Ok, here is an attempt:

AFAIK you cannot do this with float without having multiple width properties. Same thing with relative positioning of the “column”: you still need the width and margin on the left of the second column.

The solution uses CSS display: table; and table-cell (no, not an HTML table;)). It is as flexible as you want.
http://dabblet.com/gist/1717860 will show you an example (HTML is separated from CSS, an identifier has been added for clarity, but isn’t really necessary and deprecated element u has been removed and b has been replaced by strong one. 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: IE8 + Compatibility
display: inline-block; is a good reserve for IE6 / 7. Display: built-in; zoom: 1; actually, since IE6 / 7 does not understand the value of the inline block, but can achieve the same value with inline + hasLayout)

Answer 3

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

This is close to what you wanted. I just set the width for the inner div. In addition, you forgot to close the first div tag.

Answer 4

Place the first box to the left and give it the width of the patch. Then give the right div the left margin size is larger than the width of the left div! ... and don't float the second div

Answer 5

Try:

 <div style="overflow: hidden; width: 500px; margin: auto; border: 1px solid black;"> <div style="float: left; margin-right: 20px; border: 1px solid black;"> <b><u>TEST</u></b> </div> <div style="overflow: hidden;"> <div style="float: left; border: 1px solid black;">AAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAA AAA A</div> </div> </div> 

http://jsfiddle.net/ZmRY2/5/

Answer 6

Like in a table cell, try

 <div style="width: 500px; margin: auto; border: 1px solid black;"> <div style="float: left;"> <div style="border: 1px solid black;"><b><u>TEST</u></b></div> </div> <div style="display:table-cell;"> <div style="margin-left: 20px; border: 1px solid black;">AAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA </div> </div> <br style="clear: both;"> </div>