Spaltenproblem

[LiAn]

Grüezi miteinander.

Ich habe folgendes Problem:

Ich will ein dreispaltiges Layout basteln.

Links: Navigation
Mitte: Content
Rechts: Sidebar

Die Content-Spalte und die Sidebar-Spalte sollen einen linken Border haben.
Wenn der Inhalt der Sidebar-Spalte höher ist, als derjenige der Content-Spalte, oder der Inhalt der Content-Spalte höher ist, als derjenige der Sidebar-Spalte, soll sowohl der Border der Content-Spalte als auch der Border der Sidebar-Spalte mitwachsen. Deshalb habe ich die beiden Spalten: Content und Sidebar in einen 2. Wrapper gepackt. Ich habe nun aber ein Float-Problem. Die Sidebar wird leider nicht richtig gefloatet und positioniert sich zwar schön an der rechten Seite, doch leider auf der Höhe des Endes der Content-Spalte. Sorry mein Beschrieb ist ein wenig kompliziert. So schaut's momentan aus:
http://www.linzproductions.ch/test2.php
Kann mir da vielleicht jemand helfen?

HTML:

  
<div id="wrapper">  
 <div id="navigation"></div><!-- navigation -->  
    <div id="secondWrapper">  
        <div id="mainContent"></div><!-- mainContent -->  
        <div id="sideBar"></div><!-- sideBar -->  
    </div><!-- secondWrapper -->  
</div>  
<!-- wrapper -->  

CSS:

  
#wrapper {  
 position:absolute;  
 top:44px;  
 left:22px;  
 width:880px;  
 min-height:671px;  
 height:auto !important;  
 height:671px;  
 background:#acdc81;  
}  
  
#navigation {  
 position:relative;  
 top:63px;  
 left:0;  
 width:154px;  
 height:608px;  
 background:#81acdc;  
 float:left;  
}  
  
#secondWrapper {  
 position:relative;  
 top:0;  
 left:154px;  
 min-height:671px;  
 height:auto !important;  
 height:671px;  
 width:725px;  
 background:#ac81dc;  
 border-left:#f30 1px solid;  
}  
  
#mainContent {  
 position:relative;  
 top:0;  
 left:0;  
 background:#acdf34;  
 width:550px;  
 min-height:671px;  
 height:auto !important;  
 height:671px;  
}  
  
#sideBar {  
 position:relative;  
 float:right;  
 min-height:671px;  
 height:auto !important;  
 height:671px;  
 width:174px;  
 border-left:#f30 1px solid;  
 background:#123456;  
}  

[LiAn]

Sorry, das CSS für den SeconWrapper lautet so:

CSS:

  
#secondWrapper {  
 position:absolute;  
 top:0;  
 left:154px;  
 min-height:671px;  
 height:auto !important;  
 height:671px;  
 width:725px;  
 background:#ac81dc;  
 border-left:#f30 1px solid;  
}  

[ChrisB]

Hi,

Ich habe nun aber ein Float-Problem. Die Sidebar wird leider nicht richtig gefloatet und positioniert sich zwar schön an der rechten Seite, doch leider auf der Höhe des Endes der Content-Spalte.

Das muss sie ja auch - schliesslich steht sie im Quelltext hinter #mainContent. Wenn du sie dann nach rechts floatest, muss sie unterhalb von #mainContent platziert werden.

MfG ChrisB

[LiAn]

Das muss sie ja auch - schliesslich steht sie im Quelltext hinter #mainContent. Wenn du sie dann nach rechts floatest, muss sie unterhalb von #mainContent platziert werden.

Alles klar. Vielen Dank. Habe die Reihenfolge im HTML geändert und die SideBar vor den Content gesetzt. jetzt ist alles so, wie ich es will.