Voor dit soort problemen gebruik ik meestal een zogenaamde 'wrapper' div.
<style>
#container {
background: #f00;
padding: 1px;
}
#wrapper {
border: 1px solid #000;
}
</style>
en dan in je HTML:
<div id="container">
<div id="wrapper">
</div>
</div>
Je kunt pas zien of het werkt als je ook daadwerkelijk content in de wrapper div zet.
Link gekopieerd
Ik heb net even deze lokaal getest en die ziet er uit zoals jij het bedoelt denk ik:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ;
<html>
<head>
<title>CSS testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#container {
background: #f00;
padding: 1px;
}
#wrapper {
border: 1px solid #000;
background: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="wrapper">
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</body>
</html>
Link gekopieerd
Dank je wel Jan. Hier kan ik weer mee verder.
Link gekopieerd
Ik zat nog te denken aan een andere oplossing waarin de achtergrondkleur automatisch overgenomen wordt.
Als je in je wrapper div geen background opgeeft, moet hij de achtergrondkleur van de container overnemen.
Link gekopieerd
Ja, dat klinkt wel erg logisch. Ga ik ook proberen. (Uiteraard)
Link gekopieerd