guten tag allerseits, ich bin gerade mit meinem latein am ende. ich habe eine html-datei mit folgender struktur:
Quellcode:<div id="mainframe">
  <h1>blub</h1>
  <ul id="menu">tolle menuliste</ul>
  <div id="content">toller inhalt</div>
  <div id="sidebar">tolle sidebar</div>
</div>
<div id="footer">
  blabla
</div> (sonst steht nichts im code, ausser halt das ganze html / header / body usw gedöns)
folgend ist der plan:
die ganze seite soll 80% des fensters breit und zentral ausgerichtet sein. h1 und ul haben transparenten hintergrund und absolute positionierung im mainframe, so dass content & sidebar beim scrollen darunter her fließen
content und sidebar teilen sich die breite 70 / 30 auf und umfließen sich mit float.

nun habe ich bis hierher folgenden css code:
Quellcode:*
{
  border:0px;
  padding:0px;
  margin:0px;
}

body
{
  background: #E9E9E9;
  color: #000;
  font-family: Verdana, Arial, sans-serif;
  font-size: 12pt;
  line-height: 1.5em;
}

div#mainframe
{
  position: relative;
  background: #FFF;
  color: #222;
  width: 80%;
  border: solid #808080;
  border-width: 0px 1px 1px 1px;
  margin: 0px auto;
}

h1
{
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background: transparent;
  color: #9C2222;
  line-height: 16pt;
  font-size: 16pt;
}

ul#menu
{
  display: block;
  position: absolute;
  top: 3em;
  left: 0px;
  width: 100%;
  background: transparent;
  color: #9C2222;
  line-height: 14pt;
  font-size: 14pt;
  list-style-type: none;
}
ul#menu li
{
  display: inline;
}

div#content
{
  padding-top: 5em;
  width: 70%;
}


div#footer
{
  background: #E9E9E9;
  color: #555;
  font-size: 9pt;
  line-height: 1.3em;
  width: 75%;
  padding: 20px;
  text-align: center;
  margin: 0px auto;
} es sieht dann auch wie erwartet aus.

füge ich nun allerdings bei div#content und div#sidebar float: left bzw. float: right ein,
passiert folgendes: das elternelement div#mainframe beachtet bei seiner höhe die enthaltenen elemente div#content und div#sidebar nicht mehr, sobald die float angabe dazu kommt! d.h. die höhe schrumpft auf ein minimum; alles andere wird vor dem body-hintergrund dargestellt. so siehts aus

wieso?

***edit**
das problem habe ich nun zunächst so gelöst: ich habe ein zusätzliches div ohne inhalt nach der sidebar im mainframe eingefügt und über css die höhe auf 0 und clear: both gesetzt. ziemlich unelegant wie ich finde. so unnützer code muss doch nicht nötig sein, oder? mich wunder immernoch, wie der float einfluss auf das elternelement nehmen kann.

"Herr Keuner sagte: «Schwierig ist, diejenigen zu belehren, auf die man zornig ist. Es ist aber besonders nötig, denn sie brauchen es besonders.»" - Bertolt Brecht
-
"Hier gibt's was auf die Ohren" - Thewall.de bei last.fm (Was ist last.fm?)

Edit:
Scheiße, hab dein Edit nicht gelesen.
Habs bis jetzt immer mit clear: both gelöst.