[CSS] Problem mit relativer Breite

[alcaeus]

Ja, ich hatte heute wieder mal einen WTF-Moment.

Ich habe ein div, welches 50% breit und zentriert ist. Das div hat ein Padding von 1em auf allen Seiten, und einen roten Hintergrund.
Eingebettet in dieses div liegt ein weiteres, welches 100% der Breite hat, und wiederum ein padding von 1em, sowie einen gruenen Hintergrund.

Jeder der sich ein bisschen mit HTML/CSS auskennt, weiss was man dann eigentlich erwarten wuerde.

Vorgestellt?

Eingepraegt?

Ja, dann guckt euch das an: http://files.alcaeus.org/ihatecss.html
Das Ding sieht uebrigens im IE und Firefox exakt identisch aus; da sind keine Float-Spielereien drin, nichts besonderes, und die Seite ist auch komplett XHTML 1.1 valide.

Ok, nachdem ich ja nicht laestern sondern fragen will: hatte jemand schon so ein Problem, und weiss wie man es umgehen kann? BTW, die beiden verschachtelten Boxen sind momentan nur deshalb so da, weil ich die zweite Box, die darin liegen soll ausgeblendet habe, um das mit der Breite zu testen. Warum wird die Breite des Elternelements inklusive Padding genommen, und nicht wie man erwartet ohne?

Greetz
alcaeus

[joachimd]

padding:0;
in den #floater sollte das Problem lösen (sofern ich es richtig erkannt habe...)

[alcaeus]

Ja, aber das ist nicht was ich will. Die innere Box muss ein padding haben, ich will nicht dass der Text extremst am Rand klebt.

Mich wuerde nur interessieren, ob die Browser das standard-konform interpretieren oder nicht, wenn ich das richtig einschaetze, dann nicht; schliesslich zaehlt das padding ja auch zur Hoehe/Breite eines Elements, oder?

Greetz
alcaeus

[joachimd]

Zitat von alcaeus:

Ja, aber das ist nicht was ich will. Die innere Box muss ein padding haben, ich will nicht dass der Text extremst am Rand klebt.

Mich wuerde nur interessieren, ob die Browser das standard-konform interpretieren oder nicht, wenn ich das richtig einschaetze, dann nicht; schliesslich zaehlt das padding ja auch zur Hoehe/Breite eines Elements, oder?

Wenn ich das in meinem Firefox richtig erkannt habe, ist width die Textweite, das Padding wird drumherum gepackt. Teste mal, indem Du folgendes unter Deine DIVs setzt:

<TABLE width=100% border=1>
<TR>
<TD width=25%> hallo </TD>
<TD width=50%> hallo </TD>
<TD width=25%> hallo </TD>
</TR>
</TABLE>

[alcaeus]

Du scheinst recht zu haben...die Tabelle wird sauber verpackt.

Ja, und was kann ich dagegen machen? Das ist irgendwie zum...aehm...kotzen

Greetz
alcaeus

[joachimd]

Zitat von alcaeus:

Du scheinst recht zu haben...die Tabelle wird sauber verpackt.

Ja, und was kann ich dagegen machen? Das ist irgendwie zum...aehm...kotzen

Greetz
alcaeus

ich würde es Dir gerne sagen...bin selber oft am Verzweifeln mit CSS...dabei ist vieles mit einem Tabellendesign viel einfacher...

[idontwantaname]

Zitat von alcaeus:

Mich wuerde nur interessieren, ob die Browser das standard-konform interpretieren oder nicht, wenn ich das richtig einschaetze, dann nicht; schliesslich zaehlt das padding ja auch zur Hoehe/Breite eines Elements, oder? :gruebel

Laut dieser Seite zumindestens interpretieren sie es leider "richtig"

[jfheins]

Ich fürchte wohl, du muss folgendes schreiben

Code:

#floater {
      padding:1em;
      width:100%-2em; /* 100% minus 2 mal padding des Elternelements */
      background-color:green;
      border:1px solid black;
   }

[alcaeus]

Zitat von idontwantaname:

Laut dieser Seite zumindestens interpretieren sie es leider "richtig"

Na toll, das freut einen so richtig.

Zitat von jfheins:

Ich fürchte wohl, du muss foolgendes schreiben

Du machst Witze, oder? Das geht ja tatsaechlich...wenn mich meine Freundin nicht dafuer umbringen wuerde, wuerde ich dich kuessen
Weisst du noch, in welchen Browsern das funktioniert, bzw. was ich da sonst noch machen kann?

Greetz
alcaeus

[jfheins]

Das sollte in allen Browsern funktionieren (CSS-Standard ) bis auf ...

Ichb glaube der IE6 hat Probleme bei der neuberechnung, wenn du die Breite noch mit Javascript änderst ... ich schau mal nach