divs rutschen ineinander

[Utz]

Hallo,

das kann doch nicht so schwer sein, hab ich gedacht. Allerdings auch nicht richtig hingekriegt. So weit bin ich gekommen:

<div class="container">

<div class="float">
<p>Wohnort</p>
</div>

<div class="float2">
<p><form><input value="" size="40" maxlength="4" type="text" name="Wohnort"></form></p>
</div>

</div>

in Verbindung mit:

div.container
  {
  width: 100%;
  background-color: aqua;
}

div.float
  {
  float: left;
  background-color: red;
  padding: .5em;
  border: 1px solid #000077;
  width: 45%;
  text-align: right;
  }

div.float2
  {
  background-color: yellow;
  padding: .5em;
  border: 1px solid #000077;
  margin-left: 45%;
  width: 50%;
  }

Der "Trick" besteht darin, dem zweiten Div ein margin-left mitzugeben. Das Problem darin ist, dass zumindest für meinen Mozilla "45%" bei width was anderes ist als für margin-left.

Baust Du das Ganze mit <p>s statt <div>s braucht zumindest mein Mozilla diese Krücke nicht und es geht besser.

Grüße,
Utz