Height: 100%; problemer
Jeg vil prøve at forklare mit problem selvom jeg synes det er lidt svært :)Jeg sidder og skal lave en sidde som har en content div og samtidig ude til højre på siden en rightcontent. Jeg vil gerne have siden til at have en dynamisk højde som styres af dén af de to divs som er højest.
#content og #rightcontent er wrappers, som begge includes vha. php.
Jeg paster koden nedenfor, men mangler i uddybende information må i sige til - så skal jeg forsøge at forklare yderligere :)
/////// index
<?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-15\"?".">"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie_hacks.css">
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="rightcontent">
<?php
include ("rightcontent.php");
?>
</div>
<div id="content">
<?php
if(!isset($id)) { $id = "frontpage"; }
if(file_exists("$id.html")){
include ("$id.html");
} elseif (file_exists("$id.php")){
include ("$id.php");
} elseif (file_exists("$id.txt")){
include ("$id.txt");
} elseif (file_exists("$id")){
include ("$id");
} else{
include ("error404.php");
}
?>
</div>
<div id="footer"></div>
<div id="copyright">Copyright © 2007 :).dk | valid <a class="copyright" href="http://validator.w3.org/check/referer">XHTML</a></div>
</div>
</body>
</html>
/////index css
/* INDEX START */
html, body {
width: 100%;
height: 100%;
background-color: #f1f1f0;
margin: 0;
padding: 0;
font-family:Verdana, Tahoma, Arial;
font-size: 11px;
color: #656565;
}
#wrapper {
position: relative;
margin: 0px auto 0px auto;
width: 800px;
min-height: 100%;
height: auto;
background-image: url(graphics/content.gif);
}
#header {
position: relative;
background-image: url(graphics/header.gif);
left: 0px;
top: 0px;
height: 151px;
width: 800px;
z-index: 10;
}
#rightcontent {
position: relative;
width: 198px;
min-height: 100%;
top: 10px;
padding: 10px 10px 10px 10px;
margin-left: 566px;
z-index: 20;
}
#content {
position: relative;
width: 529px;
min-height: 100%;
height: auto;
top: 0px;
padding: 0px 10px 18px 10px;
margin-left: 15px;
}
#content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#footer {
background-image: url(graphics/footer.gif);
position: absolute;
bottom: 0px;
left: 0;
height: 28px;
width: 800px;
}
#copyright {
font-family: Verdana, Tahoma, Arial;
font-size: 9px;
position: absolute;
left: 35%;
bottom: 2px;
color: #999999;
text-decoration: none;
z-index: 4;
}
a.copyright {
text-decoration: underline;
color: #999999;
font-size: 9px;
font-weight: normal;
}
h1 { font-family: Verdana, Tahoma, Arial;
font-size: 12px;
}
h4 {
font-family: Verdana, Tahoma, Arial;
font-size: 9px;
float: right;
}
a:link, a:visited {
font-family: Verdana, Tahoma, Arial;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #656565;
}
a:hover {
font-family: Verdana, Tahoma, Arial;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #b0bcbd;
}
/* INDEX SIDE SLUT */
/////Forside som er included
/* FORSIDE START */
#kampagnecontainer {
position: relative;
float: left;
width: 240px;
margin-left: 2px;
}
#messecontainer {
position: relative;
float: left;
width: 240px;
margin-left: 36px;
}
#newscontainer {
position: relative;
float: left;
width: 198px;
margin-left: 0px;
margin-bottom: 20px;
margin-top: -150px;
}
#referencecontainer {
position: relative;
float: left;
width: 240px;
margin-left: 0px;
}
/* FORSIDE SLUT */
Håber det gir mening :)
