Positionierung in px und %

[gast]

Dazu hätte ich noch eine ähnliche Frage:

Ich habe ebenfalls 3 Elemente: head, content, footer.
Head und Footer haben eine feste Höhe.

Bei wenig Text im Content, soll der Footer ganz unten an der Seite hängen.
Habe ich viel Text, soll der Footer mit runterwandern und am Ende vom Content-Bereich hängen.

Der Seitenhintergrund ist rot, der Content-Hintergrund ist weiß und soll IMMER bis zum footer reichen.

Egal was ich auch probiere, entweder der footer sitzt unten und wander ggf mit - dann habe ich aber (bei wenig Text) eine sichtbare Lücke zwischen content und footer. (Variante 1)
Oder die Lücke ist geschlossen, dann fließt der Text bei viel Content allerdings "unter dem footer durch", der sich NICHT mit nach unten bewegt. (Variante 2)

Mein Seitenaufbau ist wie folgt:

<div class="outer">
 <div class="header">
   HEADER
 </div>

<div class="content">
  CONTENT
 </div>
</div>

<div class="footer">
 FOOTER
</div>

Und mein CSS:

.outer
{

min-height:100%;
 margin-bottom:-45px;
 height:auto;

}

* html .outer
{
 height:100%;
}

/* backslash hack \*/
html, body{height:100%;}
/* end */

div.header
{
 position:relative;
 padding-top:38px;
 padding-left:205px;
 margin:0px;
}

.content {

background-color: #ff0000;
  position:relative;     // wenn ich hier ABSOLUT schreibe, hab ich Variante 2
 left:205px;
}

.footer {
 padding-top:5px;
 padding-bottom:5px;
 background-color: #ffffff;
 clear:both;
 position:relative;
 text-align:center;
 left:205px;

}

**

Irgendwer eine Idee?
kay