Question

I try to convert the following with “div” elements:

<table><tbody>
<tr>
<td class="username">matthew</td>
<td class="text">hello world!</td>
</tr>
<tr>
<td class="username">this is a longer username</td>
<td class="text">hey!</td>
</tr>
</tboby></table>
.username{text-align:right;}
.text{padding-left:20px;}

http://jsfiddle.net/wqEq3/1/​

I can reproduce it with “div” only if the first column is a fixed width, I would like it to be dynamic just like the example with “table” above.

<div id="container">
    <div class="message">
        <div class="username">matthew</div>
        <div class="text">hello world!</div>
    </div>
    <div class="message">
        <div class="username">this is a longer username</div>
        <div class="text">hey!</div>
    </div>
</div>
​.message {overflow:hidden;}
.username {
    text-align:right;
    /*width:200px; How to get rid of the fixed width?*/
    float:left;
}
.text {
    padding-left:20px;
    float:left;
}

http://jsfiddle.net/cGsyK/2/

Answer 1

If you want to save markup, I think it’s only possible to do this using display: table* options, which are not supported by IE7 and older.

Demo: http://jsfiddle.net/EgUn4/