Css columns

The right column often has different widths (this is a navigation menu) - the left column is a search bar and needs to be the full width of the empty space the right columns leaves open.

by Danny_Joris

HTML

So I want the left column to fill up the empty space that the right column doesnt fill up. Not just with a faux column background, I need an input field in there. The width of the right column changes from page to page.

<div class='wrap'>
    <div class='right'>right - little content</div>
    <div class='left'><div class='left-inner'><input type="text" value="left"></div></div>    
</div>

<div class='wrap'>
    <div class='right'>right - lots of content --------- - -- - - - -- - - -</div> 
    <div class='left'><div class='left-inner'><input type="text" value="left"></div></div>    
       
</div>

CSS

.wrap
{
  width: 500px;
  background: #eee;
  margin: 10px 0px;
  float: left;
}
.wrap div
{
  height: 30px;
}

.left
{
  background: red;
  overflow:hidden;
  
}
.left-inner{
    width: 90%;
    margin: 0px auto;
}

.right
{
  background: green;
  float: right;
}

.wrap input
{
  width: 100%;
    padding: 0px;
}