Tabellen durch geschachtelte DIVs ersetzen

[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