Footer unten plazieren

Status
Nicht offen für weitere Antworten.

m_topic

Mitglied
Hallo,
Seit mehrere Stunden probiere ich erfolglos den footer einfach ganz unten zu plazieren.
IE ist brav und machts so wie ich es will, FF aber nicht.


HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
html, body {
	height:				100%;
}
body {
	margin:				0;
	padding:			0;
	background-color:	#99FF00;
}
#container {
	position:			relative;
	min-height:			100%;
	height:				100%;
	height:				auto;
}
html>body #container {
	height:				auto;
}
#header {
	line-height:		291px;
	width:				712px;
	background-color:	#0099FF;
}
#content {
	padding-bottom:		35px;
	width:				712px;
}
#footer {
	position:			absolute;
	bottom:				0;
	width:				712px;
	height:				30px;
	border-top: 		5px solid #D2D2D2;
	background-color: 	#F3F3F3;
}
#navigation {
	width:				197px;
	height:				200px;
	float: 				left;
	background-color: 	#FFFFCC;
}
#contents {
	width:				515px;
	height:				400px;
	float: 				left;
	background-color: 	#fff;
}
</style>
		
</head>

<body>
<div id="container"> 
  <div id="header"> heder </div>
	  	<div id="content">	  	
    	<div id="navigation">navigation</div>
		<div id="contents">inhalt</div>
  		</div>
  <div id="footer"> footer </div>
</div>
</body>
</html>
 
Erweitere mal das Stylesheet mit folgender Regel:

Code:
div.clear {
clear:left;
}
und notiere nach den beiden floatenden DIVs das DIV .clear:

HTML:
<div id="content">
            <div id="navigation">navigation</div>
            <div id="contents">inhalt</div>
            <div class="clear"></div>
</div>
 
Gern geschehen, und bitte markiere das "gelöste" Thema noch als erledigt.
 
Klappt leider wieder nicht. Nachdem ich Inhalt eingefügt habe bleibt footer im firefox und opera wieder hängen.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
html, body {
	height:				100%;
}
body {
	margin:				0;
	padding:			0;
	background-color:	#99FF00;
}
div.clear {
clear:left;
}
#container {
	position:			relative;
	min-height:			100%;
	height:				100%;
	height:				auto;
}
html>body #container {
	height:				auto;
}
#header {
	line-height:		291px;
	width:				712px;
	background-color:	#0099FF;
}
#content {
	padding-bottom:		35px;
	width:				712px;
}
#footer {
	position:			absolute;
	bottom:				0;
	width:				712px;
	height:				30px;
	border-top: 		5px solid #D2D2D2;
	background-color: 	#F3F3F3;
}
#navigation {
	width:				197px;
	height:				200px;
	float: 				left;
	background-color: 	#FFFFCC;
}
#contents {
	width:				515px;
	height:				400px;
	float: 				left;
	background-color: 	#fff;
}
</style>
		
</head>

<body>
<div id="container"> 
  <div id="header"> heder </div>
			<div id="navigation">navigation</div>
            <div id="contents">
			Polen verabschiedet sich mit knappem Sieg
Bartosz Bosacki hat die polnische Nationalmannschaft vor einer weiteren Blamage bewahrt. Durch zwei Tore des Verteidigers gewann Polen am Dienstag das bedeutungslos gewordene letzte Gruppenspiel gegen Costa Rica mit 2:1 (1:1) und feierte im dritten Anlauf den ersten Sieg bei der Fußball- Weltmeisterschaft. 

Die „Ticos“ dagegen verabschiedeten sich ohne einen einzigen Punkt aus dem Turnier. „Wir haben es versucht, aber uns fehlte am Ende die Kraft. Es ist enttäuschend, ohne Sieg auszuscheiden“, sagte Costa Ricas Mannschaftskapitän Luis Marón. 

Trotz des knappen Erfolges zeigten die mit hohen Erwartungen in die WM gestarteten Polen vor 43.000 Zuschauern im ausverkauften Stadion in Hannover erneut eine insgesamt enttäuschende Leistung. Nach der Führung für Costa Rica durch Ronald Gómez (24. Minute) brachte der nachnominierte Bosacki mit zwei Treffern nach Eckstößen (32., 66.) die Wende in einer mäßigen Partie. „Das ist überraschend für mich. Ich habe gedacht, dass die Stürmer oder Mittelfeldspieler die Tore schießen. Aber ich bin ihm dankbar dafür“, sagte Polens umstrittener Trainer Pawel Janas. 

Die Kritik an ihm dürfte jedoch auch nach diesem Auftritt nicht verstummen. „Wir sind kritisiert worden, dass wir keine Tore schießen können, aber heute haben wir gleich zwei erzielt. Ich bin zufrieden, dass die Mannschaft meine Taktik befolgt hat“, sagte der 53-Jährige. In Erinnerung bleiben dürfte das Spiel aber vor allem durch die hohe Anzahl an insgesamt zehn Gelben Karten. 

In der „Petersilien-Partie“, wie in Polen ein Spiel um die „Goldene Ananas“ genannt wird, hatte Janas eine deutlich offensivere Ausrichtung als in den beiden vorangegangenen Gruppenspielen gegen Ecuador (0:2) und Deutschland (0:1) gewählt. Erstmals bot Janas in Ireneusz Jelen und Maciej Zurawski zwei Stürmer auf und verzichtete auf einen zusätzlichen defensiven Mittelfeldmann. 

Doch zunächst erwies sich diese Umstellung als fatal. In der ersten halben Stunde präsentierte sich die polnische Hintermannschaft völlig ungeordnet und leistete sich katastrophale Fehler im Abspiel und in der Ballannahme. Auch der erste Treffer entsprang einer Aneinanderreihung von Aussetzern. Beim direkt verwandelten Freistoß von Gómez rauschte der Ball erst durch die Mauer und schließlich dem nach der Nicht-Nominierung von Liverpools Keeper Jerzy Dudek ebenfalls nicht unumstrittenen Torhüter Artur Boruc durch die Beine. 

Die rund 35.000 polnischen Fans im Stadion pfiffen die Spieler gnadenlos aus. Erst nach rund 30 Minuten fanden die Polen besser ins Spiel und trugen ihre Angriffe etwas strukturierter vor. Nach einem Eckball fiel dann auch der Ausgleich durch das erste Länderspieltor von Bosacki. Allerdings ging dem Treffer ein Foul von Ebi Smolarek an Keeper José Porras voraus. 

Auch nach dem Wechsel zeigten beide Teams nicht gerade erfrischenden Sommerfußball. Doch den Polen merkte man jetzt an, dass sie sich erhobenen Hauptes von ihren zahlreichen Fans verabschieden wollten, die sich jetzt für Feierstimmung statt Pfiffen entschieden hatten. So gelang „Nachrücker“ Bosacki erneut nach einem Eckstoß per Kopf sein zweiter Treffer im Turnier. 
			</div>
            <div class="clear"></div>

            		
  <div id="footer"> footer </div>
</div>
</body>
</html>
 
Dass der Footer nun "hängen" bleibt, liegt an seiner absoluten Positionierung.

Verwende mal dieses alternative Stylesheet:

Code:
html, body {
height: 100%;
margin: 0;
padding: 0;
}

body {
background-color: #99FF00;
}

#container {
position: relative;
min-height: 100%;
}

* html  #container { /* Für IE */
height: 100%;
}

#header {
line-height: 291px;
width: 712px;
background-color: #0099FF;
}

#navigation {
width: 197px;
height: 200px;
float: left;
background-color: #FFFFCC;
}

#contents {
width: 515px;
min-height: 400px;
float: left;
background-color: #fff;
padding-bottom: 35px;
}

* html #contents { /* Für IE */
height: 400px;
}

div.clear {
clear:left;
}

#footer {
position: relative;
width: 712px;
height: 30px;
border-top: 5px solid #D2D2D2;
background-color: #F3F3F3;
margin-top: -35px;
}
und diesen HTML-Code:

HTML:
<div id="container">
  <div id="header">header</div>
   <div id="navigation">navigation</div>
   <div id="contents">contents</div>
   <div class="clear">&nbsp;</div>
</div>
<div id="footer">footer</div>
 
Status
Nicht offen für weitere Antworten.
Zurück