Make Div Take All Space Left After Another Div

I have two divs side by side. The firs one contains a text field that can be rather lengthy and another one contains a number that is short. I need the first div to occupy all avai

Solution 1:

You possibly could use display: table (Fiddle):

#container {
    display: table;
}

#row {
    display: table-row;
}

#text {
    display: table-cell;
}

#value {
    display: table-cell;
}

Solution 2:

I just put the styling inline given you have multiple elements with id="text". Set a max-width, define a height, and set overflow:hidden all the while floating them both left. You may have to use a blank clear-both div in between rows.

<div id="text" style="overflow:hidden; float:left; max-width:270px; height:22px;">A very very very very very very very very long text</div><div style="float:left;"id="value">555</div>

Solution 3:

Demo Fiddle

#text {
    display: inline-block;
    border: 1px solid #007700;
    float:left;
    min-width:80%;
    max-width:80%;
}

#value {
    display: inline-block;
    border: 1px solid #770000;
    float:left;
    max-width:18%;
    overflow:hidden;
}