div problemer
okay, jeg har tre sidestillede div tags (blog, arkiv og shoutout), som vokser, når der bliver fyldt tekst i. Så har jeg en stor div nedenunder (photobook), som fylder de tre kolonnor i bredden og som skal skubbes ned af det højeste ovenstående div. hvordan gør man nu det?? De to div tags bodybox og helpcontainer er bare med til at holde det hele sammen...Resultatet ses på h**p://surftrip.dk og det er altså den sorte box, som skal skubbes omkring 50 px under den største af de tre hvide...
herunder ses min 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>Untitled Document</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="headbox"> </div>
<div id="bodybox">
<div id="shoutout">Content for id "shoutout" Goes Here</div>
<div id="helpcontainer">
<div id="blog">Conten for id "blog" Goes Here</div>
<div id="arkiv">Content for id "arkiv" Goes Here</div>
</div>
</div>
<div id="photobook">Content for id "photobook" Goes Here</div>
</body>
</html>
og her er min CSS
body {
background-image: url(../img/bg.gif);
background-repeat: repeat;
margin: 0px;
text-align: center;
}
#headbox {
height: 50px;
width: 100%;
top: 0px;
background-image: url(../img/head.gif);
background-repeat: repeat-x;
}
#bodybox {
width: 770px;
overflow: inherit;
text-align: left;
margin-top: 100;
margin-right: auto;
margin-left: auto;
}
#helpcontainer {
float: left;
width: 585px;
}
#blog {
background-color: #FFFFFF;
float: left;
width: 400px;
}
#arkiv {
background-color: #FFFFFF;
float: right;
width: 175px;
}
#shoutout {
background-color: #FFFFFF;
float: right;
width: 175px;
}
#photobook {
background-color: #000000;
width: 770px;
height: 480px;
text-align: left;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
margin-top: auto;
}
