Gesamtbreite von DIV mit padding

[cb1982]

Hi!

Ich habe unten stehendes, per CSS formatiertes Formular "geklaut" Quelle: Stichpunkt CSS: Formulare ohne Tabellen

Wenn ich das exakt so verwende passen die Container "label" und "Feld" nicht in eine Zeile weil der Gesamtcontainer "formbox" zu klein ist.
Mache ich diesen breiter passt es wie gewünscht.

Jetzt habe ich herausgefunden, dass das padding-right von "label" dafür verantwortlich zu sein scheint. Sobald ich das raus nehme passt es auch wieder.
Nun für die, die schwer von Begriff sind: padding gibt doch den Innenabstand an, also das Objekt nimmt dadurch nicht mehr Raum ein???

Kann mir da jemand auf die Sprünge helfen?

.formbox {
  width: 400px;
  color: #000;
  background-color: #cc9;
  border: 0px solid #666;
}


.reihe {
  clear: both;
  padding: 2px 0px;
}


.label {
  float: left;
  width: 100px;
  text-align: right;
  padding-top: 3px;
  padding-right: 5px;
}


.feld {
  float: right;
  width: 300px;
  text-align: left;
} 


.knopf {
  clear: both;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 30px;
}


.defbreite {
  width: 260px;
}



<div class="formbox">


<form action="...">
  <div class="reihe">
    <span class="label">Name:</span>
    <span class="feld"><input type="text" class="defbreite" size="30" /></span>
  </div>


  <div class="reihe">
    <span class="label">E-Mail:</span>
    <span class="feld"><input type="text" class="defbreite"
      size="30" /></span>
  </div>


  <div class="reihe">
    <span class="label">Interessen:</span>
    <span class="feld">
      <textarea class="defbreite" cols="30" rows="8"> 
        Welche Themen interessieren Sie besonders?
      </textarea>
    </span>
  </div>


  <div class="reihe">
    <span class="label">&nbsp;</span>
    <span class="feld"><br />
      <input type="radio" name="abo" value="rein"
        checked="checked" /> bestellen<br />
      <input type="radio" name="abo" value="raus" /> abbestellen
    </span>
  </div>


  <div class="knopf">
    <input type="submit" value="und ab damit" />
  </div>
</form>


</div>

 

[djheke]

padding gibt doch den Innenabstand an, also das Objekt nimmt dadurch nicht mehr Raum ein???

Doch! Die Breite erechnet sich so: width + padding + border = Gesamtbreite (Boxmodell).

 

[cb1982]

Ohhh, dann habe ich immer daneben gelegen. Ich dachte immer inhalt + margin + border. Ok, danke!! Das erklärt so einiges :)

 

[Elroy]

Noch etwas zu deinem "Formular".

Was du da "geklaut" hast ist kein Formular sondern eine Zumutung.
Anscheinend meint der Verantwortlich wohl man sollte ein Tabellenlayout einfach durch ein div Layout ersetzen.
Hier wird die Semantik mit Füssen getreten.

Wie man so etwas richtig umsetzt kannst du hier lernen: HTML-Elemente für Formulare : Einfach für Alle

Gruss
Elroy