navi und content bis zum footer

[Cyberbird]

Hi!

Folgendes Problem:
http://www.cyberbird-design.com/files/projects/hinckherdes
mit folgendem Stylesheet:
http://www.cyberbird-design.com/files/projects/hinckherdes/style/hh-style.css

#head {
	position: absolute;
	height: 161px;
	width: 899px;
	background: url(../grafiken/head.jpg);
}

#navi-container {
	width: 899px;
	height: 29px;
	padding-top: 161px;
}

#navi-left {
	height: 30px;
	width: 130px;
	background-color: #C3C5D9;
	float: left;
}

#navi {
	height: 30px;
	width: 769px;
	background: url(../grafiken/navi-corner.gif) right no-repeat;
	background-color: #D8DAEA;
	float: left;
}

#content-container {
	width: 899px;
}

#subnavi {
	width: 110px;
	background: url(../grafiken/subnavi-bg.gif) top left repeat-x;
	background-color: #D8DAEA;
	float: left;
	padding-left: 20px;
	
	font-size: 10px;
	color: #5D607B;
}

#content {
	position: relative;
	width: 530px;
	height: 100%;
	padding: 20px 5px 5px 15px;
	background-color: #F3F4F9;
	float: left;
}

#right {
	position: relative;
	height: 100%;
	width: 219px;
	background: url(../grafiken/right-bg.gif) top right no-repeat;
	background-color: #EDEFF7;
	float: right;
	text-align: right;
}

#footer {
	width: 899px;
	height: 5px;
	background: url(../grafiken/footer-right.gif) right no-repeat;
	background-color: #9195B2;
}

<div id="head"></div>
<div id="navi-container">
	<div id="navi-left"></div>
	<div id="navi"></div>
</div>

<div id="content-container">
	<div id="subnavi"></div>
	<div id="content"></div>
	<div id="right"></div>
</div>
<div id="footer"></div>

Frage Nummer eins: Warum wird der footer im IE falsch (zu hoch) und im FF gar nicht angezeigt?
Frage Nummer zwei: Wie bekomme ich #subnavi, #content und #right in der Höhe bis zum Footer aufgezogen?

 

[Quaese]

Hi,

zum Footer:
- IE
Der Footer wird im IE zu hoch angezeigt, weil er sich an das in ihm enthaltene Leerzeichen
anpasst.

- FF
Du hast vorher Elemente gefloatet (float). Das musst du im Footer wieder aufheben (clear).

#footer { width: 899px;
          height: 5px;
          background: url(../grafiken/footer-right.gif) right no-repeat;
          background-color: #9195B2;
          clear: both;  /* float aufheben (FF) */
          /* Schrift kleiner formatierten (IE) */
          font-size: 5px;
          line-height: 5px;}

Zur Navigation:
Blende in #content-container als Hintergrund (in y-Richtung wiederholend), die Farben der
Elemente ein, die bis unten gehen sollen. Die Hintergrundgrafik muss nur 1 Pixel hoch sein.

Zum Beispiel:

#content-container { width: 899px;
                     background: url(../bilder/logistik.gif) 100% 0 repeat-y;}

Das Beispiel blendet die Farben der Navigation rechts ausgerichtet in y-Richtung ein (die Grafik
habe ich dir in den Anhang gepackt).

Ciao
Quaese

 

[Cyberbird]

Hey dankeschön, vorbildlicher Einsatz für das Allgemeinwohl