Positionierungsprobleme

[php_rookie]

Hi!

Habe Probleme mit der Gestaltung von folgendem Formular:

<form method="post" action="foobar.php">
  <p>
    <label for="label1">Label 1:</label>
    <input type="text" name="label1" />
  </p>
  <p>
    <label for="label2">Label 2:</label>
    <input type="text" name="label2" />
  </p>
  <p>
    <label for="label3">Label 3:</label>
    <input type="text" name="label3" />
  </p>
  <p>
    <label for="label4">Label 4:</label>
    <input type="text" name="label4" />
  </p>
  <p>
    <label for="label5">Label 5:</label>
    <input type="text" name="label5" />
  </p>
</form>
<div id="hints">
    <p>mehrzeiliger</p>
    <p>text</p>
</div> 

Das zugehörige Stylesheet schaut wie folgt aus:

form {
    float: left;
}
label {
    float: left;
    text-align: right;
    width: 180px;
    padding-right: 10px;
}
input {
    width: 300px;
    float: left;
    margin: 2px;
}
#hints {
    border: 1px solid orange;
    float: right;
    width: 150px;
    height: 80px;
} 

Die Seite wird mit Firefox und Opera wie gewünscht dargestellt, d.h. das div "hints" befindest sich rechts neben den label/input-feldern, im Internet Explorer wirkt die Seite allerdings verschoben.

Kann mir bitte jemand behilftlich sein, das zu korrigieren?

TIA

[hannes-n]

probiere mal dem hints auch ein float:left zu verpassen, und den abstand anders zu erzeugen (margin etc.).

[php_rookie]

funktioniert leider auch nicht. im IE werden die label tags und die zugehörigen input-felder "auseinandergerissen". dadurch wird das form-element insgesamt zu breit und "hints" floatet unter das formular.

[jahlives]

Und wenn du dem Form die Breite vorgibst ?

Gruss

tobi

[php_rookie]

danke, tobi! im nachhinein fast trivial! jetzt gehts ;-)