I have some floating elements on a page.

What I want is the div that is floated left to be "maximally wide" so that it is as wide as it possibly can be without causing the red div ("I go at the right") to spill over onto the next line.

An example is here: The width:100%; doesn't produce the desired effect!

** I don't want the green element ("I want to be as wide as possible") to go "under" the red element. Its very important that they both stay separate i.e. .. I think they must both be floated!

<div class="container">
  <div class="a1">i go at the right</div>
  <div class="a2">i want to be as wide as possible,</div>

  <div class="clear"></div>
</div>
<style>
div
{
  border: solid 2px #000;
  background-color: #eee;
  margin: 8px;
  padding: 8px;
}

div.a1
{
  float:right;

  background-color: #a00;
  border: solid 2px #f00;
  margin: 12px;
  padding: 6px;
}

div.a2
{
  float: left;
  /*width: 100%;*/ /*this doens't produce desired effect!*/
  background-color: #0b0;
  border: solid 2px #0f0;
  margin: 12px;
  padding: 14px;
}

.clear
{
  border: none;
  padding: 0 ;
  margin: 0;
  clear:both;
}
</style>