CSS: Force textarea to ocuppy all available area

I'm working on a form with an horizontal layout:

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

The problem is that what I want is the textarea take up all available space that the label leaves in the same line. If I try with width=100% it jumps to the next line:

div * {
    vertical-align: middle;开发者_开发问答
}
textarea {
    width: 100%;
    height: 300px;
}

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

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;
}

For table-like behaviour with CSS, display: table is your friend:

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

Note that if you specify cols and rows attributes, they will override your CSS.

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

I think this is the behavior you're looking for. Even though I prefer to use divs/spans for element positioning; tables have the unique behavior (from my experience; don't know if this is in w3 specs or not) of not letting items go onto the next row; regardless of how big they become.

So, by setting the table row width to 100 percent, and the width of the cell w/the text area to 100%, the text area will consume any width available.

<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>

You need to specify width for label. like

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

I would instead put text for the label in the div and textarea in a different div and float both divs (and specify widths for both as well).

use a percentage less than 100% and leave out the cols in the textarea.try this http://jsfiddle.net/bingjie2680/Bw4MR/

update: try this: http://jsfiddle.net/bingjie2680/Bw4MR/3/ you need to use table to accomplish this job.