---
title: "Footer Problem - Kategorie CSS hoffe jemand kann helfen"
url: "https://www.typo3.net/d/54546-footer-problem-kategorie-css-hoffe-jemand-kann-helfen"
source: "typo3.net"
tags: ["Frontend","Styling","Frage","HTML & CSS"]
created: "2006-12-06"
last_reply: "2006-12-07"
replies: 3
solved: false
page: 1
pages: 1
lang: "de"
---

# Footer Problem - Kategorie CSS hoffe jemand kann helfen

Frontend › Styling · 3 Antworten · gestartet 2006-12-06

## Eröffnungsbeitrag

**thomasju** · 2006-12-06 · [Beitrag #1](https://www.typo3.net/d/54546-footer-problem-kategorie-css-hoffe-jemand-kann-helfen/1)

Hallo zusammen,

da dies eine Frage ist die nicht direkt Typo3 betrifft, habe ich sie in diese Rubrik gepackt. Es geht um folgendes:
Ich habe eine Website, mit einem 2 contentbereichen, unten soll ein Footer sein. Der Footer soll immer am unteren Browserrand stehen, es seidem der Content ist länger, dann soll der Footer nach unten rutschen.

Kann mir jemand verraten wie das gehen soll? Leider ist die Seite nicht online verfügbar. :(

Im CSS habe ich die Position des Footer relativ gesetzt, wenn nun aber der Content länger wird, bleibt der footer stehen und der Content "fließt" einfach durch.

Wenn jemand ein schönes Howto hat oder ein ähnliches Problem, bitte melden.

Danke und Grüße
Thomas

## Antworten

### [#2](https://www.typo3.net/d/54546-footer-problem-kategorie-css-hoffe-jemand-kann-helfen/2) · Unbekannter Benutzer · 2006-12-06

Hi thomasju, ohne Dein CSS-Format kann Dir glaube ich keiner helfen. Gruss Mensch

### [#3](https://www.typo3.net/d/54546-footer-problem-kategorie-css-hoffe-jemand-kann-helfen/3) · thomasju · 2006-12-06

Hi Mensch,

args voll vergessen...

```typoscript
/*
	-------------------------------------------------------
	 HTML Elements
	-------------------------------------------------------
*/

	html, body {
		margin:0;
		padding:0;
		height:100%;
		text-align: center;
		font-size:10px;
		}
	body {
		font-family:Arial,Helvetica,sans-serif;
		font-size:10px;
		margin:0;
		padding:0;
		height:100%;
		}
...
...
...
/*
	-------------------------------------------------------
	 DIV Containers
	-------------------------------------------------------
*/
	#wrapper {
		width:778px;
		text-align:left;
		margin:0;
		border-left:1px solid #ccc;
		border-right:1px solid #ccc;
		margin:0px auto;
		}
		/* IE Fix: Der IE interpretiert height als min-height */
		* html #wrapper {
			height: 100%;
			}
		#logo {
			color:#000;
			background-color:transparent;
			}	
		#mainmenu {
			color:#000;
			background-color:#9C1F2D;
			width:100%;
			}	
		#mainmenu table {
			width:100%;
			margin:0;
			padding:0;
			border:0;
			}
		
		#submenu {
			clear:both;
			background:#D8E0ED;
			color:#000;
			height:22px;
			line-height:2.1em;
			}	
		#head {
			color:#000;
			width:100%;
			height:100px;
			}

		#content {
			width:778px;
			color:#000;
			text-align:left;
			}
			#content-table {
				margin:0 0 0 0;
				}
				#content-table td {
					vertical-align:top;
					}
				#content-left {
					vertical-align:top;
					width:267px;
					}
					#content-left p {
						margin:0;
						font-size:1em;
						}
					#content-left table {
						width:100%;
						}
					#content-left td {
						border-bottom:1px solid #ddd;
						line-height:1.8em;
						}
					#content-left h1, #content-left h1, #content-left h2, #content-left h3, #content-left h4 {
						}
					#content-left h2  {
						}
					#content-left img  {
						margin:0;
						}
					
				#content-right {
					width:511px;
					vertical-align:top;
					}
					#content-right p {
						margin:0;
						font-size:1em;
						}
					#content-right h1, #content-right h1, #content-right h2, #content-right h3, #content-right h4 {
						}
					#content-right h2  {
						}
					#content-right img {
						margin:0;
						}
					#content-right th {
						text-indent:0.3em;
						}
					#content-right td {
						}
					#content-right td p {
						margin:0;
						font-size:1em;
						}

		#footer {
			position: relative;
			bottom:0;
			width:778px;
			text-align: left;
			margin: 0 auto;
			height: 40px;

			background-color:transparent;
			}
		#footer1 {
			color:#fff;
			background-color:#C17877;
			line-height:20px;
			height:20px;
			font-size:1.1em;
			text-align:center;
			}
			#footer1 a:link, #footer1 a:visited, #footer1 a:active, #footer1 a:hover {
				color:#fff;
				text-decoration:none;
				}
			
		#footer2 {
			color:#fff;
			background-color:#AD2624;
			line-height:20px;
			height:20px;
			font-size:1.1em;
			text-align:center;
			}
			#footer2 a:link, #footer2 a:visited, #footer2 a:active, #footer2 a:hover {
				color:#fff;
				text-decoration:none;
				}
```

Habe die Navigation etc rausgelassen.

Grüße
Thomas

### [#4](https://www.typo3.net/d/54546-footer-problem-kategorie-css-hoffe-jemand-kann-helfen/4) · Unbekannter Benutzer · 2006-12-07

Hi thomasju,
werde versuchen mir das mal anzuschauen, brauche jedoch Dein HTML-Grundgerüst. Du scheinst mit Tabellen zu arbeiten und der Footer soll anscheinend unterhalb der Tabellen positioniert werden?
Gruss Mensch

---

Quelle: „Footer Problem - Kategorie CSS hoffe jemand kann helfen“, typo3.net, https://www.typo3.net/d/54546-footer-problem-kategorie-css-hoffe-jemand-kann-helfen
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.