CSS: Divsne bliver flyttet rundt afhængigt af højden på content
Godmorgen de herre..Jeg har efter lang tid endelig ladet mig overbevise til at begynde at bygge hjemmesider op i divs frem for de gode gamle tabels, da jeg godt selv kan se fordelen heri. Dette har dog medført et par problemer, da jeg jo som sagt er ny på det punkt =)
På en ny side har jeg grundlæggende opbygget indholdet ud fra 4 divs som er illustreret herunder:
http://img4.imageshack.us/img4/2272/divoversigtak1.jpg
Problemet opstår så i når contentright1 + 2 + 3 i højden er større end content. Hvis dette er tilfældet kommer det til at se ud som her:
http://img4.imageshack.us/img4/9312/divprob1wz9.jpg
Her flytter den altså den bunden fra contentright 3 og smider til venstre oven i content i bunden. Hvis content er større i højden end de tre contentright bokse, så opstår problemet ikke og den ser ud som den skal. Men det er forskelligt fra side til side mht. højden, så det skal helst løses.
Det skal derfor gerne komme til at se ud som følgende:
http://img147.imageshack.us/img147/9434/divfinishhq3.jpg
Men hvordan gør jeg dette?
Min side ser ud som nedenstående:
------------------------------------------------------------------------------------------------------------
<!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=utf-8">
<title>Guitartabs</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="body2">
<div id="top"></div>
<div id="menu">
<a href="index.php"><img src="images/forside_inactive.png" id="forside" border="0" /></a>
<a href="#"><img src="images/akkorder_inactive.png" id="akkorder" border="0" /></a>
<a href="debat.php"><img src="images/debat_inactive.png" id="debat" border="0" /></a>
<a href="kontakt.php"><img src="images/kontakt_active.png" id="kontakt" border="0" /></a>
<a href="#"><img src="images/login_inactive.png" id="login" border="0" /></a>
</div>
<div id="menubottom"></div>
<div id="content">
<div id="space"></div>
<div id="contentmain"><img src="images/content_kontakt.png" id="contenttop" border="0" />
<div id="space3"></div>
<div id="text">div = content
</div>
</div>
<div id="contentright"><img src="images/content_right_akkorder.png" id="contentrighttop" border="0" /><div id="space2"></div>
<div id="text">div = contentright</div>
</div>
<div id="contentrightbottom"></div>
<div id="space2"></div>
<div id="contentright2"><img src="images/content_right_debat.png" id="contentrighttop" border="0" /><div id="space2"></div>
<div id="text">div = contentright2
</div>
</div>
<div id="contentrightbottom"></div>
<div id="space2"></div>
<div id="contentright3"><img src="images/content_right_statistik.png" id="contentrighttop" border="0" /><div id="space2"></div>
<div id="text">div = contentright3
</div>
</div>
<div id="contentrightbottom"></div>
<div id="contentmainbottom"></div>
<div id="space"></div>
</div>
<div id="bottom">Per Søndergaard Jensen © copyright 2009 - all rights reserved</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------------
Og min stylesheet ser ud som her:
------------------------------------------------------------------------------------------------------------
body{
padding:0px;
margin:0px;
background-image: url(images/bg.png);
background-color:#FFFFFF;
font-size: 11px;
font-family: verdana, arial;
}
#body2{
width: 710px;
height: auto;
background-image: url(images/bg_shadow.png);
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
}
#top{
width: 667px;
height: 243px;
background-image: url(images/logo.png);
background-color:#FFFFFF;
margin-left: 21px;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
}
#menu{
width: 667px;
height: 40px;
background-image: url(images/bg_menubottom.png);
margin-left: 21px;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
}
#forside{
margin-top: 0px;
width: 86px;
height: 40px;
background-color:#000000;
color: #fff;
display: block;
float:left;
}
#akkorder{
margin-top: 0px;
width: 92px;
height: 40px;
background-color:#000000;
color: #fff;
display: block;
float:left;
}
#debat{
margin-top: 0px;
width: 86px;
height: 40px;
background-color:#000000;
color: #fff;
display: block;
float:left;
}
#kontakt{
margin-top: 0px;
width: 86px;
height: 40px;
background-color:#000000;
color: #fff;
display: block;
float:left;
}
#login{
margin-top: 0px;
width: 86px;
height: 40px;
color: #fff;
display: block;
float:right;
}
#menubottom{
width: 667px;
height: 6px;
background-color:#d1c49a;
margin-left: 21px;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
}
.input1 {
font-size: 10px;
font-family: verdana, arial;
width: 170px;
height: 16px;
border: 1px solid #cccccc;
padding-top: 5px
}
.input2 {
font-size: 10px;
font-family: verdana, arial;
width: 170px;
height: 16px;
border: 1px solid #cccccc;
padding-top: 5px
}
.input3 {
font-size: 10px;
font-family: verdana, arial;
width: 300px;
height: 200px;
border: 1px solid #cccccc;
padding-top: 5px
}
#content{
width: 667px;
height: auto;
background-color:#FFFFFF;
margin-left: 21px;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
}
#contentmain{
width: 417px;
height: auto;
background-image: url(images/content_main_bg.png);
margin-left: 12px;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
float: left;
}
#space{
width: 10px;
height: 13px;
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
}
#space2{
width: 214px;
height: 13px;
margin-left: 0px;
margin-right: 12px;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
float: right;
}
#space3{
width: 417px;
height: 13px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
float: left;
}
#contentmainbottom{
width: 417px;
height: 3px;
background-image: url(images/content_main_bg_bottom.png);
margin-left: 12px;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
float: left;
}
#contenttop{
width: 417px;
height: 35px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
float: left;
}
#contentright{
width: 214px;
height: 205px;
background-image: url(images/content_right_bg.png);
margin-left: 0px;
margin-right: 12px;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
float: right;
}
#contentright2{
width: 214px;
height: 205px;
background-image: url(images/content_right_bg.png);
margin-left: 0px;
margin-right: 12px;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
float: right;
}
#contentright3{
width: 214px;
height: 128px;
background-image: url(images/content_right_bg.png);
margin-left: 0px;
margin-right: 12px;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
float: right;
}
#contentrightbottom{
width: 214px;
height: 3px;
background-image: url(images/content_right_bg_bottom.png);
margin-left: 12px;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
float: left;
}
#contentrighttop{
width: 214px;
height: 35px;
margin-left: auto;
margin-right: auto;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
float: left;
}
#text{
margin-left: 10px;
margin-right: 10px;
padding-top: 0px;
padding-left: 0px;
padding-bottom: 10px;
padding-right: 0px;
float: left;
}
#bottom{
width: 667px;
height: 15px;
background-color:#000000;
color: #ffffff;
font-size: 9px;
font-family: verdana, arial;
text-align: center;
margin-left: 21px;
margin-right: auto;
padding-top: 8px;
padding-left: 0px;
padding-bottom: 6px;
padding-right: 0px;
}
------------------------------------------------------------------------------------------------------------
