To sidestillede bokse skal vokse ens i højde?
Hej Eksperter,Så fortsætter min øvese på http://www.blixx.dk
Mit problem nu er at jeg på midten af siden har én stor boks, hvori der ligger en venstrestillet boks, og en højrestillet boks. Den venstrestillede skal indeholde en menustruktur, den højrestillede indhodlet på siden.
Der sker det nu, at når den ene indeholder mere i længden end den anden, ja, så følger baggrundsfarven ikke med.
I kan se på siden lige nu hvad der er galt, men eller kommer koden her:
*** 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" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/blixx/css/template.css" type="text/css" media="screen"/>
</head>
<body>
<div id="fixed-960">
<div class="topleftmenubox">
</div>
<div class="toprightmenubox">
<div class="toprightmenuboxtop">
<div class="toprightmenuboxmail">
<img src="<?php echo $this->baseurl ?>/templates/blixx/images/mail.png">
</div>
<div class="toprightmenuboxhome">
<img src="<?php echo $this->baseurl ?>/templates/blixx/images/home.png">
</div>
<div class="toprightmenuboxfind">
<img src="<?php echo $this->baseurl ?>/templates/blixx/images/find.png">
</div>
</div>
<div class="toprightmenuboxbottom">
<div class="toprightmenuboxbottomleft">
<div class="toprightmenuboxbottomlefttext">Designmøbler til private og erhverv
</div>
</div>
<div class="toprightmenuboxbottomright">
<div class="toplogo"><img src="<?php echo $this->baseurl ?>/images/blixx/website/logo.png">
</div>
</div>
</div>
</div>
<div class="contentwrapper">
<div class="leftmenu">Menu 1 <br><br> Menu 2 <br><br> Menu <br><br> Etc.
</div>
<div class="content">
Indhold og menu skal gerne fylde lige meget og fylde baggrundsfarven ud i begge sektioner. Hvis menuen er længere end indholdet, sker som her, at baggrundsfarven stopper inden den når bund-sektionen. Det samme gælder hvis der er mere indhold end menu, så stopper baggrundsfarven på menuen også.
</div>
</div>
<div class="bottomleftbox">
</div>
<div class="bottomrightbox">
</div>
</div>
<!-- BEGIN GOOGLE ANALYTICS -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-sdasdasd-1");
pageTracker._trackPageview();
} catch(err) {}</script>
<!-- END GOOGLE ANALYTICS -->
</body>
</html>
***CSS ***
body
{
background-image:url('../images/bg_page.jpg');
background-repeat:repeat-x;
background-color:#FFFFFF;
margin-top:10px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
padding:0;
text-align:center; /* Fixed-960 center hack */
font-family:Tahoma, Verdana, Arial;
font-size:0.7em;
line-height:1.5em;
color:#666666;
}
#fixed-960 /* Bestemmer en siddebredde på 960px */
{
width:960px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
text-align:left;
}
div.topleftmenubox
{
height:200px;
width:240px;
border:none;
float:left;
background-image:url('../images/topleftbg.png');
background-repeat:repeat-x;
background-color:#b7d432;
}
div.toprightmenubox
{
height:200px;
width:720px;
border:none;
background-color:#323232;
float:right;
}
div.toprightmenuboxtop
{
height:40px;
width:720px;
border:none;
}
div.toprightmenuboxfind
{
height:24px;
width:24px;
border:none;
float:right;
padding-top:10px;
padding-bottom:0px;
padding-right:10px;
padding-left:0px;
}
div.toprightmenuboxhome
{
height:24px;
width:24px;
border:none;
float:right;
padding-top:10px;
padding-bottom:0px;
padding-right:10px;
padding-left:0px;
}
div.toprightmenuboxmail
{
height:24px;
width:24px;
border:none;
float:right;
padding-top:10px;
padding-bottom:0px;
padding-right:35px;
padding-left:0px;
}
div.toprightmenuboxbottom
{
height:160px;
width:720px;
border:none;
}
div.toprightmenuboxbottomleft
{
height:160px;
width:500px;
border:none;
float:left;
}
div.toprightmenuboxbottomlefttext
{
font-family:Lucida Console;
font-weight:normal;
font-size:1em;
line-height:1.5em;
color:#999999;
border:none;
position:relative;
top:100px;
/* bottom:px; */
padding-left:40px;
/* right:px; */
}
div.toprightmenuboxbottomright
{
height:160px;
width:220px;
border:none;
float:right;
}
div.toplogo
{
border:none;
height:126;
width:126;
position:relative;
top:19px;
/* bottom:px; */
padding-left:79px;
/* right:px; */
}
div.contentwrapper
{
/*height:; */
width:960px;
/* border-style:solid; */
/* border-width:2px; */
}
div.leftmenu
{
/* height:; */
width:240px;
/* border-style:dotted; */
/* border-width:2px; */
float:left;
background-color:#323232;
}
div.content
{
background-color:#FFFFFF;
/* height:; */
width:720px;
/* border-style:dashed; */
/* border-width:2px; */
float:right;
}
div.bottomleftbox
{
height:100px;
width:240px;
border:none;
float:left;
background-color:#4f4f4f;
}
div.bottomrightbox
{
height:100px;
width:720px;
border:none;
background-color:#323232;
float:right;
}
