not a support question
Edit: koden blev ikke vist når jeg satte code tags rundt om, sikkert mig der laver rod, så det er i blockquote istedet for, tilgiv mig :)
Right, for at forklare problemet ordentligt er det nok fornuftigt at vise koden.
<body>
<center>
<div id="wrapper"> <!-- This wraps around the entire page for inserting bg patterns etc. And for defining the size, positioning etc. of the page-->
<div id="header"> <!-- This div is for defining the layout and structure of the header -->
</div> <!-- Ending the header div -->
<div id="main"> <!-- This wrapper contains both the content and the sidebar as this design has a sidebar :) it is the stuff between the header and the footer so it should be content+sidebar wide-->
<div id="sidebar"> <!-- This div is for defining the layout and structure of the sidebar -->
</div> <!-- Ending the sidebar div -->
<div id="content"> <!-- This div is for defining the layout and structure of the content -->
</div> <!-- Ending the content div -->
</div> <!-- Ending the main div -->
<div id="footer"> <!-- This div is for defining the size and positioning of the footer -->
</div> <!-- Ending the footer div -->
</div> <!-- Ending the wrapper div -->
</body>
Som man kan se er ligger sidebar'en og selve indholder (loopet etc.) i hver sin div, som igen ligger inden i en div der hedder "main", som ligger mellem header div'en og footer div'en.
Jeg har så givet main div'en et baggrundsbillede der skal ligge bag både "content" og "sidebar", css'et er her.
body
{background-image: url(images/bgpattern.jpg)
}
#wrapper /* the wrapper lays around the entire <body> part of the page */
{}
#header /* the header div is for defining the size and structure of the header*/
{height: 107px;
width: 820px;
background-image: url(images/zorianheader.gif);}
#main /* This wraps around both the content area and the sidebar, should be content + sidebar wide */
{background-image: url(images/zorianbg.gif);
width: 820px;
height: 300px;}
#content /* The content div is for the structure and positioning of the content */
{float: left;
width: 620px;}
#sidebar /* The sidebar div is for the structure and positioning of the sidebar */
{float: right;
width: 200px;}
#footer /* The footer div is for the structure and positioning of the sidebar */
{background-image: url(images/zorianfooter.gif);
clear: both;
width: 820px;
height: 184px;}
Men, den baggrund der er sat ind i #main vises ikke som ses på det her billede
Det er muligvis mig der er en CSS padde. Hvis jeg giver #main en fixed' højde, så vises baggrunden, så min tanke er at det er fordi den ikke har nogen højde, altsår #main, men jeg troede at når de to div'er der ligger inden i #main får en høje, så får #main automatisk samme højde, baggrunden skulle jo gerne følges med siden i højde, sådan at hvis der er meget text er den høj, hvis der er lidt tekst er den lav osv.
her kan man se hvordan det virker når main får en fast højde, problemet er bare at den skal være flydende.
Spørgsmålet er så, hvordan får jeg #main til at have samme højde som #content og #sidebar har, hvis det overhovedet er muligt.
På forhånd mange tak for jeres svar.
-Andreas
