✔ Frage bezüglich Position

[blizz-faad]

Hallo Community,
also ich habe gerade ein Problem mit der CSS-Positionierung. Ich weiß zwar das so wie mein Code gerade ist nicht funktionieren kann (wegen "absolute"), dennoch komme ich nicht drauf wie ich meinen Code ändern soll damit es funktioniert.

Hoffentlich versteht ihr an Hand vom Screenshot wie es sein soll. Der Lila-Rand ist zur Übersicht wie weit der Inhalt und Wrapper/Container momentan reicht.
1) Der Footer soll direkt nach dem Inhalt kommen (Inhalt kann unterschiedlich hoch sein).
2) Der Wrapper/Container soll nicht 100% Höhe vom Browser einnehmen sondern nur die Höhe bis zum Footer.

CSS-Code:

body { margin: 0px; padding: 0px; background: #FFFFFF; font-family: Arial; font-size: 12px; color: #494949; }
  	
div.container { border: 1px solid #FF00FF;
position: absolute; left: 0px; top: 0px; width: 922px; height: 100%; background-image: url(../img/img_bg.jpg); background-repeat: repeat-y; }
div.img_header_01 {
position: absolute; left: 0px; top: 0px; width: 201px; height: 120px; background-image: url(../img/img_header_01.jpg); background-repeat: no-repeat; }
div.img_header_02 {
position: absolute; left: 201px; top: 0px; width: 201px; height: 120px; background-image: url(../img/img_header_02.jpg); background-repeat: no-repeat; }
div.img_header_03 {
position: absolute; left: 402px; top: 0px; width: 201px; height: 120px; background-image: url(../img/img_header_03.jpg); background-repeat: no-repeat; }
div.img_header_04 {
position: absolute; left: 603px; top: 0px; width: 297px; height: 120px; background-image: url(../img/img_header_04.jpg); background-repeat: no-repeat; }
div.img_content_bg { border: 1px solid #FF00FF;
position: absolute; left: 0px; top: 203px; width: 886px; background: #FFFFFF; background-image: url(../img/img_content_bg.jpg); background-repeat: repeat-x; padding:7px; }
div.standort {
position: absolute; left: 0px; top: 182px; width: 588px; height: 14px; background: #747474; border-right: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; padding-top:3px; padding-bottom:3px; padding-left:7px; padding-right:7px; font-size: 11px; color: #FFFFFF; }
div.kundencenter {
position: absolute; left: 603px; top: 182px; width: 283px; height: 14px; background: #747474; border-bottom: 1px solid #FFFFFF; padding-top:3px; padding-bottom:3px; padding-left:7px; padding-right:7px; font-size: 11px; color: #FFFFFF; }
div.footer {
position: absolute; left: 0px; top: 542px; width: 886px; height: 12px; background: #747474; padding-top:4px; padding-bottom:4px; padding-left:7px; padding-right:7px; font-size: 9px; color: #FFFFFF; }
div.footer_verlauf {
position: absolute; left: 0px; top: 562px; width: 900px; height: 16px; background-image: url(../img/img_footer_verlauf.jpg); background-repeat: repeat-x; }

Index-Datei:

<div class="container">
<div class="img_header_01"></div>
<div class="img_header_02"></div>
<div class="img_header_03"></div>
<div class="img_header_04"></div>
<a href="?page=xxxxxxx" target="_top" class="img_button_xxxxxxx" title="xxxxxxx"></a>
<a href="?page=xxxxxxx" target="_top" class="img_button_xxxxxxx" title="xxxxxxx"></a>
<a href="?page=xxxxxxx" target="_top" class="img_button_xxxxxxx" title="xxxxxxx"></a>
<a href="?page=xxxxxxx" target="_top" class="img_button_xxxxxxx" title="xxxxxxx"></a>
<div class="img_button_platzhalter"></div>
<div class="standort">Sie befinden sich hier: xxxxxx</div>
<div class="kundencenter"><a href="#" class="navi" target="_top">Kundencenter &ouml;ffnen</a></div>
<div class="img_content_bg">INHALT<br /><br /></div>
<div class="footer">xxxxxxx | <a href="?page=agb" class="footer" target="_top">AGB</a></div>
<div class="footer_verlauf"></div>
</div>

 

[Maik]

Hi,

ich empfehle dir, auf alle absoluten Positionsangaben zu verzichten, und stattdessen mit Hilfe der float-Eigenschaft DIV-Blöcke nebeneinander auszurichten. Diese "Floats" werden mit der clear-Eigenschaft beendet, wenn der nachfolgende Block darunter fortgesetzt werden soll.

mfg Maik