Сделать плавающий элемент максимально широким

Question

У меня есть несколько плавающих элементов на странице.

То, что я хочу, это то, что div, который перемещается влево, должен быть «максимально широким», чтобы он был настолько широким, насколько это возможно, без того, чтобы красный div («Я иду справа») перетекал на следующий линия.

Пример здесь: ширина: 100%; не дает желаемого эффекта!

** Я не хочу, чтобы зеленый элемент («Я хочу быть максимально широким») шел «под» красным элементом. Очень важно, чтобы они оба были отделены друг от друга, т. Е. Я думаю, что они оба должны быть спущены на воду!

<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

Работа с процентами:

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