CSS: Using 100% of remaining width - css

Question

I'm making a list consisting of an image, title, buttons, source code and am having a problem with using 100% of the remaining width.
My main problem is that I'm not being able to make a <textarea> use all the remaining width and height.
Here's what I'm getting:
And what I intend to have:
Below the source code, CSS:
.listing {width:100%;background:#f1f1f1;display:table;}
.leftimage {clear:none;display:table-cell;padding:20px;}
.listing .information {padding: 20px;width:100%;display:table-cell;}
.listing .information .title {font-size:20px;color:#016b98;}
.listing .information .title a {color:#016b98;text-decoration:underline;}
.listing .information .outsideButton {float:left;padding-top:5px;padding-right:5px;clear:none;}
.listing .information .outsideButton {clear:right;}
.listing .information .outsideButton .button {border: 1px solid #626262;background:#d8d8d8;}
.listing .information .outsideButton .button .label {padding:5px;}
.listing .information .outsideButton .button .label a {color:#626262;}
HTML:
<div class="listing">
<div class="leftimage">
<div style="height:150px;"><!-- Allows to change image position on click without changing .listing size -->
<a><img class="preview" height="150px" src="img.png"></a>
</div>
</div>
<div class="information">
<div class="title">
<a>TITLE</a>
</div>
<div class="outsideButton">
<div class="button">
<div class="label">
<a>BUTTON 2</a>
</div>
</div>
</div>
<div class="outsideButton">
<div class="button">
<div class="label">
<a>BUTTON 3</a>
</div>
</div>
</div>
<div class="outsideButton">
<div class="button">
<div class="label">
<a>BUTTON 4</a>
</div>
</div>
</div>
<div class="outsideButton">
<div class="button">
<div class="label">
<a>BUTTON 5</a>
</div>
</div>
</div>
<!-- END OF BUTTONS -->
<!-- HERE I WANT TO DISPLAY THE TEXTAREA WITH HTML CODE -->
<div style="float:left;padding-top:10px;clear:left;width:100%;">
<textarea style="padding:0;margin:0;width:100%;"><?php echo htmlspecialchars("<div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div>"); ?></textarea>
</div>
<!-- END OF TEXTAREA WITH HTML CODE -->
</div><!-- END OF .information -->
</div>
Thanks.
SOLUTION:
Set vertical-align:top; for every table-cell

Answer 1

As also referred in my comments maybe this helps you to achieve the same result but without the usage of floats at all:
CSS for HTML dynamic layout with not fixed columns?
Build the layout with display: table; and display: table-cell; properties and then use width: 100% on your <textarea>
EDIT:
You still use floats for your buttons - clear them correctly - e.g. wrap them in a <div class="clearfix"> and use this css for it:
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
EDIT:
For anyone refering to this question: as pointed out by 2013Asker, don't forget to set the vertical-align: when using display: table-cell

Answer 2

First you have to tell the container div to get the remainder space and then tell textarea to get all that space of its parent. Add 'width: 100px' to each one.
<div style="float:left;padding-top:10px;clear:left; width:100%">
<textarea style="padding:0;margin:0; width: 100%"><?php echo htmlspecialchars("<div> <span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div><div><span>Whatever...</span></div>"); ?>
</textarea>
</div>