CSS 3 Spalten bis zum Footer

daniel_sun

Erfahrenes Mitglied
Hallo,

ich habe folgendes html-dokument:

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">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../css/main.css" />
	<title>XXX</title>
</head>
<body>
	<div id="root">
    	<div id="header">XXX</div>
		<div id="left">
        	<div id="navigation_categorie">Kategorie</div>
            <div id="navigation_links"><a href="_sample.tpl">Link 1</a></div>
        </div>
   	 	<div id="content">Mitte</div>
        <div id="right">Rechts</div>
        <div id="footer">Footer</div>
    </div>
</body>
</html>

Dazu folgendes CSS-Dokument:

HTML:
@charset "utf-8";
/* CSS Dokument der Hauptseite */
/* Generelle einstellungen der Seite*/
body
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;	
}
/*Unsichtbarer DIV-Container um die Elemente auf der Seite zu zentrieren*/
#root
{
    position:relative;
	width:1000px;
    margin: 0px auto;
    border: 1px;
	display:block;
}
/*Header der Website*/
#header
{
 	background-color:#009900;
	color:#FFFFFF;
	width:1000px;
	height:100px;
	font-size:40px;
	text-align:right;
}
/*Linke Spalte der Website*/
#left 
{
	width:175px;
	float:left;
	background-color:#c0c0c0;
	display:block; 
}
/*Inhaltsteil der Website*/
#content
{
	width:650px;
	float:left;
	display:block;; 
}
/*Rechte Spalte der Website*/
#right 
{
	width:175px;
	display:block;
	float:right;
	background-color:#c0c0c0;
}
/*Footer der Website*/
#footer
{
	width:1000px;
	clear:both;
	background-color:#c0c0c0;	
}


Mein Problem ist nun, dass ich die 3 Spalten (left, content,right) nicht auf eine Höhe bekomme. Sie sind jeweils nur so lang wie ihr Inhalt. Sie sollen sich aber dem Längsten anpassen, so das alle bis zum Footer reichen.

Bitte um Hilfe. Schickt mir nun bitte keine Links zu Beispielen. Hab gegoogeld und das Forum duchsucht und mir wirklich alle Beispiele dazu angeguckt und versucht es in meinen Dokumenten umzusetzen aber es klappt einfach nicht.

Wäre toll wenn mir jemand sagen könnte wo konkret in bei mir der Fehler liegt und wie er zu beheben ist.

Gruß
daniel_sun
 
Zurück