Bastian Beha: footer immer unterer Rand

Beitrag lesen

Hallo

Ich habe ein kleines Problem!
Ich bin grad am basteln einer site!
Wie kann ich mit css meinen roten footer so formatieren dass er an der Blauen Tabelle stoppt und sich nicht beim verkleinern des Browserfenster darüber schiebt?
Die blaue Tabelle ist von der Höhe variabel weil da später verschiedener content rein kommt!

Hier das Beispiel:

<html>
<head>
<title>test</title>
<style type="text/css">

body {
 margin: 0px;
 padding: 0px;
 background-color: #FFFFFF;
 color: #000000;
 }

#content_main_container {
 background-color:#0000FF;
 width: 612px;
 font-size: 12px;
 color: #000000;
 }

#content_margin_container {
 background-color:#00FFFF;
 width: 132px;
 }

#footer {
 width: 944px;
 background-color: #FF0000;
 vertical-align: bottom;
 padding-bottom: 0px;
 position: absolute;
    bottom: 0 !important;
    bottom: -1px;
    height: 50px !important;
 overflow: hidden;
 }
-->
</style>
</head>

<body>

<table id="layout">

<tr>
  <td height="400px" bordercolor="#333333" bgcolor="#CCCCCC">&#160;</td>
 </tr>
  <tr>
  <td id="content_main_container">&#160;</td>
  <td id="content_margin_container">&#160;</td>

</tr>
</table>

<div id="footer">

</div>

</body>
</html>

Danke schon mal im voraus

Gruss basti