Tabellen durch geschachtelte DIVs ersetzen

[Christian]

Hallo!
Unter http://62.146.42.45/csstest.html habe ich eine Testseite erstellt, bei der ich mit Hilfe eines DIVs und einer darin enthaltenen Tabelle ein bestimmtes Layout erreiche, nämlich einen farbigen Bereich der außen herum noch einen Rand hat, allerdings mit einem gewissen Abstand.
Eigentlich finde ich es sehr unschön, dass ich für das Layout eine Tabelle verwenden musste. Viel lieber würde ich mit zwei geschachtelten DIVs arbeiten. Allerdings ist es mir nicht gelungen, dieses Layout mit zwei geschachtelten DIVs nachzubauen.
Mein Problem ist, dass das innere DIV nie exakt das äußere DIV ausfüllt. Während die Größenangabe "width: 100%; height: 100%" für die Tabelle das gewünschte Ergebnis erzielt, reicht ein DIV, das mit den gleichen Eigenschaften formatiert wird, rechts und unten über das äußere DIV hinaus (http://62.146.42.45/csstest2.html). Das ist gemäß CSS-Spezifikation sogar korrekt, da eine Breite von 100% bedeutet, dass das innere DIV genau die gleiche Breite hat wie das äußere, wobei *danach* noch die Ränder drauf gerechnet werden. Aber wie kann ich dann das gewünschte Ergebnis erreichen?
Natürlich könnte ich dem inneren DIV explizit eine Größe zuweisen. Da ich aber mehrere solcher Elemente mit unterschiedlichen Größen auf meiner Seite habe, ist diese Lösung unschön. Mit relativen Werten < 100% zu probieren ist auch nicht wirklich sinnvoll, da ich damit keine exakten Abstände bekomme. Schließlich würde mir als Workaround einfallen, die Ränder mit Grafiken zu gestalten (http://aktuell.de.selfhtml.org/tippstricks/css/runde_ecken/index.htm). Das mag für das hier vorliegende Problem ein Ausweg sein, ich kann mir aber leicht andere Situationen vorstellen, wo das nicht hilft. Daher bleibt die Frage, ob es eine allgemein gültige Lösung für das Problem gibt.
Im Forum und in den Tipps habe ich nichts gefunden, daher hoffe ich, dass mir hier vielleicht jemand helfen kann. Vielen Dank schon mal im  Voraus!
Christian

[Christian]

Noch ein Nachtrag: Die von mir beschriebenen Probleme mit den zwei geschachtelten DIVs treten nur im Firefox auf. Im IE wird die Seite "richtig" (?), d.h. so wie gewünscht dargestellt. Es könnte also sein, dass das Verhalten doch nicht korrekt ist, sondern ein Fehler in der Darstellung von Firefox. Auch dann brauche ich aber eine Lösung. ;)

[wahsaga]

hi,

Noch ein Nachtrag: Die von mir beschriebenen Probleme mit den zwei geschachtelten DIVs treten nur im Firefox auf. Im IE wird die Seite "richtig" (?), d.h. so wie gewünscht dargestellt.

Gut, dass du "richtig" in Anführungszeichen gesetzt hast.

Es könnte also sein, dass das Verhalten doch nicht korrekt ist, sondern ein Fehler in der Darstellung von Firefox.

Nein, aber der IE interpretiert height bekanntlich fälschlicherweise wie min-height.

gruß,
wahsaga

[wahsaga]

hi,

Natürlich könnte ich dem inneren DIV explizit eine Größe zuweisen. Da ich aber mehrere solcher Elemente mit unterschiedlichen Größen auf meiner Seite habe, ist diese Lösung unschön.

Was heißt denn mehrere solcher Elemente mit unterschiedlichen Größen?

Haben die auch jeweils absolute Höhen?
Dann kannst du die Werte für jede Möglichkeit berechnen, Selektoren wie IDs und Klassen helfen dir dann bei der Formatierung der richtigen Elemente.

Probleme würdest du nur bekommen, wenn der Inhalt des inneren Elements dieses mal größer werden liesse als das äußere. Da kannst du dir ggf. mit einer Mindesthöhe, ansonsten mit overflow helfen.

gruß,
wahsaga

[Gunnar Bittersmann]

Hello out there!

Verweise einbinden, danke.

http://62.146.42.45/csstest2.html:

#outer {  
  border: 1px solid black;  
  width: 250px;  
  height: 300px;  
  padding: 1px;  
}  
  
#inner {  
  width: 100%;  
  height: 100%;  
  background: red;  
  color: black;  
  padding: 5px;  
}

Warum gibst du die Maße für #inner nicht auch in Pixel an?

See ya up the road,
Gunnar

[Gunnar Bittersmann]

Hello out there!

[…] reicht ein DIV, das mit den gleichen Eigenschaften [width: 100%; height: 100%] formatiert wird, rechts und unten über das äußere DIV hinaus (http://62.146.42.45/csstest2.html). Das ist gemäß CSS-Spezifikation sogar korrekt, da eine Breite von 100% bedeutet, dass das innere DIV genau die gleiche Breite hat wie das äußere, wobei *danach* noch die Ränder drauf gerechnet werden.

So ist es, #inner ist um doppelte Paddingstärke breiter als in die äußere Box passen würde.

Aber wie kann ich dann das gewünschte Ergebnis erreichen?

Du addierst das Padding von #inner noch auf das von #outer drauf, damit haben beide Boxen die passende Größe. Du musst nur noch die innere in die äußere schieben, jeweils eine Paddingstärke nach links und nach oben:

#outer {  
  border: 1px solid black;  
  width: 250px;  
  height: 300px;  
  padding: 6px;  
}  
  
#inner {  
  width: 100%;  
  height: 100%;  
  background: red;  
  color: black;  
  padding: 5px;  
  position: relative;  
  top: -5px;  
  left: -5px;  
}

See ya up the road,
Gunnar