nicht angemeldet
Hallo zusammen,
ich habe mir ein eigenes CSS-Layout gebaut und habe noch zwei Probleme damit. Auch die Durchforstung vieler Seiten zu meinem Problem brachte mir keine (zufriedenstellende) Lösung.
Ich habe eine Layout bestehend aus Header, Navigation, linker Spalte und rechter Spalte (als content).
Mein HTML-Markup sieht folgendermaßen aus:
<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="navigation"><?php require_once('inc/navigation.php'); ?></div>
<div id="left"><?php require_once('inc/left.php'); ?></div>
<div id="content"><?php require_once('inc/content.php'); ?></div>
<div id="footer"><?php require_once('inc/footer.php'); ?></div>
</div>
</body>
Das Problem bei meinem CSS-Layout ist, dass ich die Seite gerne über die gesamte Höhe anzeigen lassen würde (egal ob content vorhanden oder nicht.) Das klappt auch, allerdings werden left und content nicht bis zum footer "gestreckt" (zu erkennen am Hintergrund!). Kennt da jemand eine vernünftige Lösung? Ausserdem bekomme ich es nicht hin, dass mein Footer so breit ist wie der header.
Hier meine CSS-Datei:
*
{
margin: 0;
padding: 0;
}
html, body {height: 100%;}
body
{
background-image: url(img/background.png);
background-attachment: fixed;
font-family: Verdana,Tahoma,Arial,Sans-Serif;
font-size: 11px;
text-align: center;
cursor: crosshair;
}
body div {text-align: left;}
div#container
{
position: relative;
width: 85%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
border: 4px solid #000000;
background-color: #FFFFFF;
}
div#header
{
height: 75px;
padding: 10px;
background-color: #FF0000;
color: #FFFFFF;
}
/* Left Sidebar */
div#left
{
float: left;
width: 256px;
border-right: 2px solid #FF0000;
padding: 8px 4px;
background-color: #000000;
color: #FFFFFF;
}
/* Main Content */
div#content
{
margin-left: 266px;
padding: 12px;
background-color: #FFFF33;
color: #000000;
}
/* Page Footer */
div#footer
{
clear: both;
position: absolute;
bottom: 0;
width: 85%;
height: 24px;
border-top: 2px solid #000000;
padding: 4px;
background-color: #FF0000;
color: #FFFFFF;
line-height: 24px;
text-align: center;
}
Wie gesagt. Habe schon überall nachgeschaut. Wäre super nett, wenn mir jemand weiterhelfen könnte!
MFG
teh_hahn