CODEWITHSUNDEEP
css
Matthew
Matthew

Reputation: 11260

2 columns with <div>, first column dynamic width

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/

Upvotes: 0

Views: 509

Answers (5)

sandeep
sandeep

Reputation: 92803

Write like this:

.username {
    text-align:right;
    /*width:200px; How to get rid of the fixed width?*/
    float:left;
}
.text {
    padding-left:20px;
    overflow:hidden;
}

Check this http://jsfiddle.net/cGsyK/4/

Upvotes: 0

Henesnarfel
Henesnarfel

Reputation: 2139

To keep the same markup you have I've moved the usernames into one div and the text into another. I don't know how this would effect how you are populating but it is an option

see here http://jsfiddle.net/cGsyK/3/

Upvotes: 0

zambotn
zambotn

Reputation: 785

You have to set the width in px of the container and use %s for the columns.

Upvotes: 1

draconis
draconis

Reputation: 458

I use 2 container divs named "message" and "username" instead of one div and a text-align right, so even if username has too big width all usernames will be right side of that div.

here : http://jsfiddle.net/KCgCs/1/

the longest username will set usernames div's width and all other will be positioned to right.

Upvotes: 1

welldan97
welldan97

Reputation: 3076

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/

Upvotes: 1

Related Questions