Q: Two column CSS table-like styling with unknown widths I want to come up with a CSS to do this kind of styling:
|Short Text                31231|
|longlonglonglonglonglo      331|
|ng text                        |

but with my current CSS, this is what happens:
|Short Text                31231|   
|longlonglonglonglonglong text  |    
|                            331|

I am floating left and right as you might expect, and I don't know the width of the right column. Different widths for different rows are possible and accepted, I don't require a global border between left and right column.
I want left to take as much space as possible, without going into right's area.
note: I can't use table because this is an external library and I have to define html row by row.

A: Set their widths to 50%. Example:
http://jsfiddle.net/52R8R/
CSS
.b{
width:50%;
float:left;
}
.c{
width:50%;
float:right;
}

HTML
<div class="b">aaaaaaaaaaaaaaaaaaaa</div>
<div class="c">11111</div>
<div class="b">aaaa</div>
<div class="c">11111</div>

EDIT: taking into consideration your comment this should work:
.c
{
float:right; 
border-style:solid; 
}
.b
{
border-style:solid; 
background-color:blue; 
overflow:hidden; 
}

note: you have tu put your divs with <div class="c"> before b.
