Katharina: Input mit width:100% ist zu breit

Beitrag lesen

Hallo,

ich habe einen Fensterbereich mit variabler Breite, in den ich gerne einen Text und ein Textfeld stecken möchte. Der Text soll unabhängig davon wie lang er ist 70px breit sein. Das Textfeld soll die restliche verfügbare Breite ausnutzen.

Das Problem: Das Textfeld mit seinen 100% ist breiter als das umschließende div, es ragt über dessen Rand hinaus und zwar genau um die 70px des Texts links davon. Mit Tabellen funktioniert das Ganze, ich möchte aber gerne die unten gezeigten spans nutzen.

Kann mir jemand helfen?

<html>
  <head><title>Test</title></head>
  <body>
    <div style="width:300px; border: 1px solid black;
                position:absolute; left:200px; top:200px;">
      <div style="white-space: nowrap; width: 100%;">
        <span style="overflow: hidden; width: 70px; max-width: 70px;
                     float:  left;">
          <p style="margin: 0px; padding: 0px;">Text</p>
        </span>
        <span style="clear: both; width: 100%;">
          <input id="id" type="text" name="id" value="value"
                 style="width: 100%;"/>
        </span>
      </div>
    </div>
  </body>
</html>