MCXSC: Div-Container überlagern sich?!

SELF-Forum

Div-Container überlagern sich?!

MCXSC
– Informationen zu den Bewertungsregeln

Hallo,

zuerst einmal meine beiden Codeteile (bzw. Dateien):

[b]Stylesheets.css:[/b]

[code=CSS]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;
}
[/code]
[b]index.html:[/b]

[code=HTML]<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="stylesheets.css">
  </head>
  <body>
    <div align="center">
      <div id="website">

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<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<br />
                      Sidebar<br />
                      Sidebar<br />
                      Sidebar<br />
                    </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>[/code]

[b]So siehts aus (im FF):[/b]

[URL=http://img69.imageshack.us/my.php?image=1200856861658pw6.png][img]http://img69.imageshack.us/img69/6448/1200856861658pw6.th.png[/img][/URL]

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

Beitrag melden
–
Informationen zu den Bewertungsregeln