Einzelnen Beitrag anzeigen

MCXSC
(Gast)

n/a Beiträge
 
#1

[HTML/CSS] Div-Container übelagern sich

  Alt 20. Jan 2008, 19:26
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
  Mit Zitat antworten Zitat