Mystik med DIV
Jeg har uploadet et eksempel her: http://www.snuf.dk/x/Det består af én DIV-kasse med to andre DIV-kasser i. Én med et foto og en smal kasse med tekst.
Meningen er, at den inderste smalle kasse med tekst IKKE skal fortsätte under DIV-kassen med fotoet. Den skal respektere foto-kassen´s margin, ligesom teksten i den gör.
Mit spörgsmål er: Hvorfor er det kun teksten i 'smal-kasse-med-tekst' der holder margin til foto_kassen? Og hvordan får jeg hele 'smal_kasse_med_tekst' til det?
Er det forståeligt? Ellers uddyber jeg gerne. Nedenfor er HTML- og CSS-koder.
På forhånd tak!
CSS:
#kasse {
width: 450px;
margin: 5px 5x 5px 5px;
padding:5px 5x 5px 5px;
background-color:#DADADA;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-left:1px solid #000000;
border-top:1px solid #000000;
}
#foto_kasse {
float: left;
margin: 5px 5x 5px 5px;
padding:5px 5x 5px 5px;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-left:1px solid #000000;
border-top:1px solid #000000;
}
#smal_kasse_med_tekst {
margin: 5px 5x 5px 5px;
padding:5px 5x 5px 5px;
background-color:#CDCDCD;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-left:1px solid #000000;
border-top:1px solid #000000;
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Xpert Xmpel</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="kasse">
<div id="foto_kasse">
<img src="foto.jpg" height="150" width="100" border="1">
</div>
<div id="smal_kasse_med_tekst">Smal kasse med tekst</div>
Mellemkasse.. Tekst tekst tekst tekst..
</div>
</body>
</html>
