CSS: force text field to recoup all available area

Question

I am working on a horizontal layout form:

 <div id="container">
  <label for="ta">description</label>
  <textarea id="ta" name="ta" cols="50" rows="10"></textarea>
 </div>

The problem is that I want textarea to take up all the free space that the label leaves on one line. If I try with width = 100%, it will go to the next line:

div * {
    vertical-align: middle;
}
textarea {
    width: 100%;
    height: 300px;
}

Any idea to implement it without assigning a fixed space for each tag?

Answer 1

Like this? http://jsfiddle.net/4QbMr/

<div id="container">
    <label for="ta">description</label>
    <div class="twrap"><textarea id="ta" name="ta" cols="50" rows="10"></textarea></div>
</div>

label {
    float: left
}
.twrap {
    overflow: hidden;
    padding: 0 4px 0 12px
}
textarea {
    width: 100%;
    height: 300px;
}

Answer 2

http://jsfiddle.net/N9hvU/27/

, , . divs/spans ; ( , , w3 ), ; , .

, 100 w/ 100%, .

<div id="container">
    <table>
        <tr style="width:100%;">
            <td>
                <label for="ta">description</label>
            </td>
            <td style="width:100%;">
                <textarea id="ta" name="ta"></textarea>
            </td>
        </tr>
    </table>
</div>

Answer 3

CSS display: table :

#container {
    display: table;
    width: 100%;
}
#container label, #container textarea {
    display: table-cell;
    vertical-align: top;
}
#container textarea {
    width: 100%;
    height: 300px;
}

, cols rows, CSS.

Answer 4

100% cols textarea.try this http://jsfiddle.net/bingjie2680/Bw4MR/

update: : http://jsfiddle.net/bingjie2680/Bw4MR/3/ .

Answer 5

You need to specify the width for the label. as

label {width: 20%; } textarea {width: 80%; }

Instead, I would place the text for the label in the div and textarea in the other div and float both divs (and also set the widths for both).