Make the floating element "as wide as possible"

Question

I have some floating elements on the page.

What I want is a div that floated to the left to be “as wide as possible”, so that it is as wide as possible without causing the red div (“I'm going to the right”) to flow to the next line.

Example: Width: 100%; does not give the desired effect!

** I do not want the green element ("I want to be as wide as possible") to go "under" the red element. It is very important that they both remain separate, that is ... I think they should both be floating!

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

Answer 1

Work with percentages:

div.a1
{
  float:right;

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

div.a2
{
  float: left;
  width: 84%;
  background-color: #0b0;
  border: solid 2px #0f0;
  margin: 2%px;
  padding: 14px;
}

, %, . , margin: , margin: 2% 4% . + 100%, (2%*2)*2 + 84% + 8% = 100%.