[CSS]Footer wird nicht ganz unten angezeigt

[SunshineGuy]

Hey,

ich habe folgendes Problem, undzwar wird mein Footer auf meiner Homepage nicht ganz unten angezeigt sonder über einem Element:
Hier ein Bild der Homepage:

 Spoiler

Das "Hello" stellt den Footer dar.
Hier ist der HTML Code:

 Spoiler

<!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=iso-8859-1"/>
<title>Ai - Subs</title>
<meta name="description" content="ai-subs" />
<meta name="keywords" content="ai-subs" />
<meta name="language" content="de, eng" />
<link rel="stylesheet" href="style/style.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>

<div id="main">
	<div id="headerLogo"></div>
	<div id="headerMenu">
		<ul>
			<li>Suche</li>
			<li>Login</li>
			<li>Registrieren</li>
			<li>Sare Video</li>
			<li>Anime - List</li>
			<li>Kontakt</li>
			<li class="current">Startseite</li>
		</ul>
	</div>
	<div id="header"></div>
	<div id="mainLeft">
		Filter
		<div class="mainMenu">
			<ul>
				<li class="current">Alle</li>
				<li>Deutsch</li>
				<li>Englisch</li>
				<li>Gesubbt</li>
				<li>Hochgeladen</li>
				<li>News</li>
			</ul>
			<div id="mainVideo">
				<div id="videoEntry">
					Hyouka
					<div class="border">
						<div class="whiteBackground"></div>
						<img src="style/images/preview/hyouka.png" alt="hyouka"/>
					</div>
					Houkya Folge 20
				</div>
			</div>
		</div>
	</div>
	<div id="mainRight">
		Community
		<div class="mainMenu">
			<ul>
				<li class="current">Chat</li>
				<li>Login</li>
				<li>Registrieren</li>
			</ul>
			<div id="chat">
				<script type="text/javascript" id="sid0010000002623105234">(function() {function async_load(){s.id="cid0010000002623105234";s.src='http://st.chatango.com/js/gz/emb.js';s.style.cssText="width:325px;height:360px;";s.async=true;s.text='{"handle":"aisubs","styles":{"b":100,"c":"666666","d":"666666","g":"333333","j":"333333","k":"FFFFFF","l":"CCCCCC","m":"FFFFFF","s":1,"t":0,"aa":1}}';var ss = document.getElementsByTagName('script');for (var i=0, l=ss.length; i < l; i++){if (ss[i].id=='sid0010000002623105234'){ss[i].id +='_';ss[i].parentNode.insertBefore(s, ss[i]);break;}}}var s=document.createElement('script');if (s.async==undefined){if (window.addEventListener) {addEventListener('load',async_load,false);}else if (window.attachEvent) {attachEvent('onload',async_load);}}else {async_load();}})();</script>
			</div>
		</div>
	</div>
</div>
<div id="footer">Hello</div>
<script>
$("li").click(function () {
	$(".mainMenu li").removeClass("current");
	$(this).toggleClass("current");
});
</script>
</body>
</html>

Und der CSS Code:

 Spoiler

body {
	background: #e3e3e3;
	font-family: Arial;
	font-size: 10pt;
	margin: 5px 0;
	padding: 0;
}

#main {
	width: 960px;
	margin: 0 auto 0 auto;
}

#header {
	width: 960px;
	height: 218px;
	background: url(images/header.png);
	float: left;
}

#headerLogo {
	margin: 0 10px;
	float: left;
	background: url(images/logo.png);
	width: 160px;
	height: 45px;
	background-color: none;
	-webkit-transition-property: background-color;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-delay: 10ms;

    -moz-transition-property: background-color;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in;
    -moz-transition-delay: 10ms;

    -o-transition-property: background-color;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in;
    -o-transition-delay: 10ms;

    transition-property: background-color;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
    transition-delay: 10ms;
}

#headerLogo:hover {
	background-color: #e7e7e7;
}

#headerMenu {
	float: right;
	width: 750px;
	height: 33px;
	margin: 10px 0;
}

#headerMenu li {
	background: url(images/menu.png) no-repeat;
	background-position: top;
	width: 87px; 
	height: 27px;
	list-style: none;
	text-align: center;
	padding: 3px 0px;
	color: #ccc;
	margin: 0 0 0 5px;
	float: right;
	cursor: Pointer;
}

#headerMenu li:hover {
	background-position: center;
	color: #eee;
}

#headerMenu .current {
	background-position: bottom;
	color: #fff;
}

#headerMenu li:active, #headerMenu .current:hover {
	background-position: bottom;
	color: #fff;
}

#mainLeft, #mainRight {
	color: #888;
	width: 620px;
	float: left;
	margin: 10px 0;
}

#mainRight {
	width: 325px;
	float: right;
}

.mainMenu {
	background: url(images/filter.png) repeat-x;
	width: 100%;
	height: 25px;
	float: left;
}

#chat {
	margin: 30px 0;
}

.mainMenu ul {
	padding: 0;
	margin: 0;
}

.mainMenu li {
	list-style: none;
	color: #636363;
	text-transform: uppercase;
	font-size: 8pt;
	width: 94px;
	text-align: center;
	float: left;
	height: 25px;
	line-height: 17pt;
	background-color: none;
	-webkit-transition-property: background-color, color;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-delay: 10ms;

    -moz-transition-property: background-color, color;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in;
    -moz-transition-delay: 10ms;

    -o-transition-property: background-color, color;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in;
    -o-transition-delay: 10ms;

    transition-property: background-color, color;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
    transition-delay: 10ms;
}

.mainMenu li:hover, .mainMenu .current{
	background-color: #57afff;
	cursor: Pointer;
	color: #ffffff;
}

#mainVideo {
	width: 100%;
	float: left;
	margin: 20px 0;
	text-shadow: #fff 0px 1px 0px;
}

#videoEntry {
	width: 192px;
	height: 156px;
	float: left;
	color: #999;
	text-align: center;
}

#videoEntry:hover {
	color: #57afff;
}

#videoEntry .border {
	background: url(images/videoentry.png);
	width: 188px;
	height: 120px;
}

.whiteBackground {
	width: 176px;
	height: 108px;
	background: white;
	position: absolute;
	margin: 6px 0 0 6px;
	-webkit-transition-property: opacity;
    -webkit-transition-duration: 300ms;
    -webkit-transition-timing-function: ease-in;
    -webkit-transition-delay: 10ms;

    -moz-transition-property: opacity;
    -moz-transition-duration: 300ms;
    -moz-transition-timing-function: ease-in;
    -moz-transition-delay: 10ms;

    -o-transition-property: opacity;
    -o-transition-duration: 300ms;
    -o-transition-timing-function: ease-in;
    -o-transition-delay: 10ms;

    transition-property: opacity;
    transition-duration: 300ms;
    transition-timing-function: ease-in;
    transition-delay: 10ms;
	opacity: 0;
	filter: alpha(opacity = 0);
}

.whiteBackground:hover {
	opacity: 0.3;
	filter: alpha(opacity = 30);
}

/*#footer {
	background: url(images/footer.png);
	width: 100%;
	height: 40px;
	float: left;
	margin: 50px 0;
	text-align: center;
	color: #fff;
	line-height: 35px;
}*/
#footer {
    clear:left;
    margin-top:1em;
    background:#efefef;
    text-align:center;
	float: left;
	width: 100%;
}

Hoffe ihr könnt mir dabei helfen,

Grüße
SunshineGuy

[Mikesch01]

#footer {
    clear:both;
}

Du musst beide Umflüsse auflösen

[SunshineGuy]

Originally Posted by Mikesch01

#footer {
    clear:both;
}

Du musst beide Umflüsse auflösen

Danke, jedoch wird der footer noch an der selben Stelle angezeigt :/

[alg0r!thm]

Probiers mal damit:

PHP Code:

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;
   background:#6cf;
} 


Lg,
Daniiel'