100% i forhold til et andet div
Jeg sidder og roder med en side, der skal variere efter sidens størrelse. Problemet er dog at den ikke skal gå helt ud i kanten.Derfor har jeg bygget en div uden om selve designet, for at holde possitionerne på plads. Problemet er dog at de divs inde i det yderste div er relative i forhold til siden, og ikke i forhold til det yderste div.
Mit css: (kun det vigtigste)
body {
background-color: #ebd8ff;
margin: 0px;
overflow: auto;
}
#mainDiv {
position: absolute;
left: 0px;
top: 0px;
width: 800px;
height: 600px;
}
#head {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 120px;
background-image: url(gfx/headbg.gif);
}
Og html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sjælstjerne - The Heaven</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="mainDIv">
<div id="content">
</div>
<div id="purpleLeft"></div>
<div id="redRight"></div>
<div id="bottom"></div>
<div id="head"></div>
<div id="purpleTop"></div>
<div id="purpleBottom"></div>
<div id="theHeaven">
<img src="gfx/theheaven.gif" alt="The Heaven" /></div>
<div id="yellow">
<img src="gfx/yellow.gif" /></div>
<div id="gg">
<img src="gfx/gg.gif" /></div>
<div id="leftBottom">
<img src="gfx/leftbottom.gif" /></div>
</div>
</body>
</html>
Så hvordan får jeg head og alle de andre divs til at holde sig inden for mainDiv?
