problem med css positionering af div
HejsaJeg er ved at udvikle en side, som jeg opbygger med div's. Mit problem er, at det div der bør være nederst på siden hele tiden flytter op. Jeg er ikke vildt stærk i CSS positionering, så jeg kan ikke finde en løsning selv. Jeg forsøgte med lidt javascript, dog uden held =/
Det der skal gøres er: Div'ne 'container' og 'footerContainer' skal skaleres/placeres afhængigt af hvor megen tekst der er i Div'ne 'mainContent' og 'hojresideContent'
Sitet kan ses her: http://www.jgldesign.dk/tst/index.html
Her er html og css koden, for dem der ikke gider klikke sig ind på siden:
---------------------
HTML:
---------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Forside</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
function alignDivCenter(id) {
document.getElementById(id).style.left = document.body.offsetWidth/2-326;
}
onresize = function() {
alignDivCenter('container');
}
</script>
</head>
<body onload="alignDivCenter('container')">
<div id="container" class="container">
<div id="headerContainer" class="headerContainer">
<img src="header.jpg" alt="" />
</div>
<div id="mainContent" class="mainContent">
<h1>Overskrift1</h1>
<p>langt indhold....</p>
</div>
<div id="hojresideContent" class="hojresideContent">
<h1>Overskrift1</h1>
<p>langt indhold....</p>
</div>
<div id="footerContainer" class="footerContainer">
<img src="footer.jpg" alt="" />
</div>
</div>
</body>
</html>
---------------------
CSS:
---------------------
BODY
{
background-color:#EDECEC;
}
H1
{
color: #7F5D04;
font-family : Verdana, Geneva, Arial;
font-size : 8pt;
text-decoration : none;
font-weight: bold;
}
P
{
color: #666666;
font-family : Verdana, Geneva, Arial;
font-size : 8pt;
text-decoration : none;
font-weight: normal;
}
.container
{
background-color:#D7D7D7;
position:relative;
top:0px;
left:0px;
width:653px;
height:600px;
z-index:0;
}
.headerContainer
{
position:absolute;
top:0px;
left:0px;
width:653px;
z-index:2;
}
.footerContainer
{
position:absolute;
bottom:0px;
left:0px;
width:653px;
z-index:3;
}
.mainContent
{
position:absolute;
top:253px;
left:15px;
width:408px;
z-index:4;
}
.hojresideContent
{
background-image:url('rightback.jpg') repeat-y;
position:absolute;
top:250px;
left:469px;
width:186px;
z-index:5;
}
---------------------
På forhånd mange tak for hjælpen! =)
