Delphi-PRAXiS - [HTML/CSS] Div-Container übelagern sich

Hallo,

zuerst einmal meine beiden Codeteile (bzw. Dateien):

Stylesheets.css:

Code:

			body {

  background:#00FF00;

  margin:0px;

  padding:0px;

  font-family: Trebuchet MS,Bitstream Vera Sans,Verdana,Tahoma,Helvetica,Arial;

  font-size:0.85em;

  letter-spacing:0.5px;

}

#website {

  background:#FF0000;

  width:90%;

  border-left:1px solid #D3D3D3;

  border-right:1px solid #D3D3D3;

  padding:5px;

}

#content {

  width:100%; 

}

#navigation {

  padding-top:5px;

  width:114px;

  float:left;

}

#navigation #tab {

  margin-top:3px;

  background:#0000FF;

  width:114px;

  height:65px;

  text-align:center;

}

#mainframe {

  margin-left:114px;

}

#mainbox { background:#0F0F00; }

#mainbox #ol { float:left; background:#0F0F0F; width:6px; height:5px; }

#mainbox #or { background:#546783; height:5px; }

#mainbox #cc { border-left:1px solid #949494; border-right:1px solid #949494; }

#mainbox #ul { float:left; background:#5F4F5F; width:6px; height:5px; }

#mainbox #ur { background:#97979F; height:5px; }

#blackbar { padding:0px 4px; }

#blackbar #left { float:left; background:#745FFF; width:5px; height:25px; }

#blackbar #main { background:#25FF25; height:25px; margin-left:3px; color:#979797; padding-left:5px; text-align:left; vertical-align:middle; font-size:0.8em; }

#contentframe { margin:4px; }

#contentframe #sidebar {

  width:209px;

  float:left;

  background-color:#9F3F935;

}

#contentframe #display {

  margin-left:213px;

}

#sidebar #top {

  background:#F79895;

  width:209px;

  height:4px;

}

#sidebar #middle {

  background:#F4F4F6;

  width:209px;

}

#sidebar #bottom {

  background:#D8547D;

  width:209px;

  height:4px;

}

index.html:

Code:

			<html>

  <head>

    <title></title>

    <link rel="stylesheet" type="text/css" href="stylesheets.css">

  </head>

  <body>

    <div align="center">

      <div id="website">

        <div id="content">

          <div id="navigation">

            <div id="tab">Tab</div>

            <div id="tab">Tab</div>

            <div id="tab">Tab</div>

          </div>

          <div id="mainframe">

              <div id="ol"></div>

              <div id="or"></div>

              <div id="cc">

                <div id="blackbar">

                  <div id="left"></div>

                  <div id="main">

                    <span>Headerbar</span>

                  </div>

                </div>

                <div id="contentframe">

                  <div id="sidebar">

                    <div id="top"></div>

                    <div id="middle">

                      Sidebar

                      Sidebar

                      Sidebar

                      Sidebar

                    </div>

                    <div id="bottom"></div>

                  </div>

                  <div id="display">

                    Contentberrich

                  </div>

                <div id="blackbar">

                  <div id="left"></div>

                  <div id="main">Footerbar </div>

                </div>

              </div>

              <div id="ul"></div>

              <div id="ur"></div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </body>

</html>

So siehts aus (im FF):

http://img69.imageshack.us/img69/644...1658pw6.th.png

Jetzt zu meinem Problem:

Es geht nur um den rechten Teil der Seite. Bzw. um die "Sidebar", den "Contentbereich", und den "Footer". Wenn ich den Inhalt der Sidebar vergrößer, vergrößtert sich auch der Container dieser. Allerdings nicht der Rest. "Footer" sollte eigentlich unter der Sidebar bzw. dem Contentbereich stehen, und nicht daneben beginnen...

...kann mir vll. jemand einen Tipp geben?

Danke im voraus,
MCXSC