Katharina: Input mit width:100% ist zu breit

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>

  1. hi,

    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.

    Natürlich, 100% sind 100%. Und 100% plus 70px sind 100% plus 70px.

    <span style="overflow: hidden; width: 70px; max-width: 70px;
                         float:  left;">
              <p style="margin: 0px; padding: 0px;">Text</p>
            </span>

    P hat übrigens nichts in Span verloren.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hallo,

      Ich dachte die 100% beziehen sich auf den verfügbaren Platz (also 100%-70px).

      Wie kann ich denn das Ganze sonst realisieren mit 2 spans?

      Danke und Grüße,
      Katharina

      Natürlich, 100% sind 100%. Und 100% plus 70px sind 100% plus 70px.

      gruß,
      wahsaga

      1. Hallo Katharina,

        Wie kann ich denn das Ganze sonst realisieren mit 2 spans?

        Mit einer "Tabelle".

        Gruß Gernot