css float - CSS: Using 100% of remaining width -

I am compiling a list with a single image, title, button, source code, and 100% of the remaining width.

My main problem is that I & lt; Textarea & gt; I can not use all the remaining width and height.

What I'm doing here: < P> And what is my intention:

Source code Below, CSS:

  .listing {width: 100%; Background: # f1f1f1; Display: table;} Leftimage {Clear: None; Performance: 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. Info .outsidebutton {float: left; Padding-top: 5px; Padding-right: 5px; Cl Ear: None;} .listing .information .outsideButton {clear: true;} .listing. Information .outsideButton .button {boundary: 1px solid # 626262; Background: # d8d8d8;} .listing. Information .outsideButton .button .label {Padding: 5px;} .listing .information .outsidebutton .button .label a {color: # 626262;}   
 HTML:  
  & lt; Div class = "listing" & gt; & Lt; Div class = "leftimage" & gt; & Lt; Div style = "height: 150px;" & Gt; & Lt ;! - Allows to change image position on click without making changes. Listing size - & gt; & Lt; A & gt; & Lt; Img class = "preview" height = "150px" src = "img.png" & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "notification" & gt; & Lt; Div class = "title" & gt; & Lt; A & gt; Title & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "outbutton" & gt; & Lt; Div class = "button" & gt; & Lt; Div class = "label" & gt; & Lt; A & gt; Button 2 & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "outbutton" & gt; & Lt; Div class = "button" & gt; & Lt; Div class = "label" & gt; & Lt; A & gt; Button 3 & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "outbutton" & gt; & Lt; Div class = "button" & gt; & Lt; Div class = "label" & gt; & Lt; A & gt; Button 4 & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "outbutton" & gt; & Lt; Div class = "button" & gt; & Lt; Div class = "label" & gt; & Lt; A & gt; Button 5 & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - End of buttons - & gt; & Lt ;! - Here I want to display Textured with HTML code - & gt; & Lt; Div style = "float: left; padding-top: 10px; clear: left; width: 100%;" & Gt; & Lt; Textarea style = "padding: 0; margin: 0; width: 100%;" & Gt; & Lt ;? Php echo htmlspecialchars ("& lt; div>  whatever ...   
 & lt; Period & gt; Whatever ... & lt; / span & gt; & lt; / div & gt; & lt; div & gt; & lt; duration & gt; Anything ... & lt; / Span & gt; & lt; / div & gt; & lt; div & gt; & lt; duration & gt; Anything ... & lt; / span & gt; & lt; / div & gt; & lt; ; Div> gt; & lt; duration & gt; whatever ... & lt; / span & gt; & lt; / div & gt; & lt; div & gt; & lt; duration & gt; Anything Ho ... .. & lt; / span & gt; & lt; / div & gt; "); ? & Gt; & Lt; / Text field & gt; & Lt; / Div & gt; & Lt ;! - End of texture with HTML code - & gt; & Lt; / Div & gt; & Lt ;! - End Information - & gt; & Lt; / Div & gt;   
 Thanks.  
  Solution:  For each table-cell,  vertical-align: top;   
 As it may have been mentioned in my observations, it helps you get the same results  display: table;  and  display: table-cell; Create a layout with properties, and then  your  & lt; Textarea & gt; Edit:  
 You still use floats for your buttons - clean them correctly - like they are  and lt; Div class = "clearfix" & gt; Wrap the code in  and use this CSS for:  
  .clearfix {* zoom: 1; } .clarfix: first, .clarfix: after {display: table; Line-height: 0; material: ""; } .clarfix: after {clear: both; }   
 Edit:  
 For anyone referencing this question: As stated by Ascar 2013, setting the  vertical-align Do not Forget:  When Using Display: Table-Cell