CSS Problem mit Footer

[musterman]

Hallo,

ich habe ein kleines CSS-Problem mit einem Footer, das ich irgendwie nicht auf die Reihe kriege:

Ich habe diverse Container untereinander angeordnet (in der Mitte befinden sich zwei Spalten mit einem Menue und einem Content-Bereich)

Jetzt möchte ich den Haupt-Container auf 100 % Höhe setzen, um auch auf größeren Bildschirmauflösungen die ganze Höhe auszunützen. Wenn ich nun den Footer am unseren Ende platzieren will, bekomme ich das nur hin, wenn ich die Position:absolut unterer Rand 0 px setze.

Das würde auch bei Normalansicht funktionieren. Nur wenn man jetzt den Bildschirm kleiner skaliert, wandert der Footer in den Contenbereich und bleibt bei der Skalierung nicht am unteren Ende.

Beim jetzigen CSS-Code (wie anbei) bleibt der Footer zwar auch beim Skalieren am unteren Ende - aber ich kann den Hauptcontainer nicht auf 100 % Höhe setzen. Das geht wieder nur mit Position: absolut und der Footer wandert nach oben.

Weiss jemand hierzu noch eine Lösung oder ist das überhaupt nicht machbar ?

Vielen Dank im voraus

Musterman

tml,body {
	margin:0;padding:0
}

body {
	color: #FFFFFF;
	text-align: center;
	font-family: verdana, arial, sans-serif;
	font-size: 13px;
	line-height: 20px;
	background-image: url(images/bg.png);
	background-repeat: repeat;
	}

div#header-h1 {
	font-size: 31px;
	font-weight: normal;
	letter-spacing: 4px;
	margin: 0;
	padding: 20px 0 60px 20px;
}

div#header{
	color: #cccccc;
	height: 140px;
	text-align: center;
	vertical-align: bottom;
	background-image: url(images/bg_content.jpg);
}

div#container {
	text-align:	left;
	background-color: #FFFFFF;
}

div#maintext {
	margin: 20px;
}

div#leftcolumn {
	width: 200px;
	background-color: #FFFFFF;
}

div#footer {
	color: #FFFFFF;
	margin: 0;
	font-size: 12px;
	padding: 15px 0 5px 0;
	text-align: center;
	clear: both;
	width: 100%;
	background-color: #a3a3a3;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	border-bottom: 2px solid #363636;
	border-top: 2px solid #363636;
	
}

div#container {
	border-right: 2px solid #363636;
	border-left: 2px solid #363636;
	width: 950px;
	background-color: #FFFFFF;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	height: 100%;
}

div#content {
	border-top: 2px solid #363636;
	float: right;
	width: 700px;
	background-image: url(images/bg_content.jpg);
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: #363636;
}

div#leftcolumn {
	border-top: 2px solid #363636;
	float: left;
	width: 248px;
}

#menu {
	padding-left: 0;
	margin: 0;
	width: 250px;
}

#menu li {
	list-style: none; 
	margin: 0;
	padding: 0;
}

#menu li a
{ 
	font-size: 11px;
	background: #6c6c6c url(images/nav_arrow_off.gif) no-repeat right;
	color: #fff;
	display: block;
	width: 100%;
	line-height: 2.6em;
	border-top: 1px solid #a3a3a3;
	border-bottom: 2px solid #363636;
	outline:none;
	text-decoration: none;
	text-indent: 10px;
	text-transform: uppercase;
}

#menu li a:hover {
	color: #363636;
	background: #cccccc url(images/nav_arrow_over.gif) no-repeat right;
}


a {
color: #363636;
	font-weight: bold;
	outline: none;
	text-decoration: none;
}

a:hover {
	color: #6c6c6c;
	text-decoration: none;
}


blockquote {
	margin-left: 25px; 
	margin-right: 0;
	padding: 0;
	font: bold 14px/20px verdana,arial,sans-serif;
}

[Boris]

Du brauchst #footer keine Breite zuweisen - es ist ein Blockelement und somit automatisch so breit, wie maximal Platz ist (sprich: so breit wie dein Fenster).

[musterman]

Sorry - ich meinte auch nicht die Breite sondern die Höhe !

[marc22]

Gib dem Footer eine feste Höhe und ein entsprechendes, negatives margin-top

(Wenn ich das richtig verstanden habe)