Vanessa: Probleme mit float und Seitenlänge

Hallo!

Ich habe bei meinem derzeitigen Projekt ein kl. Darstellungsproblem bzgl. der Seitenhöhe. Bei unterschiedlich viel Textinhalten in den beiden Div-Containern (content_left, content_right) schließt die Seite am Ende nicht bündig ab. Das Problem hat der IE nicht, aber dafür FF und Opera. Wer kann mir weiterhelfen?

Code aus der HTML-Seite -->
<html>
<body>
<div id="siteframe">
  <div id="content">
    <div id="content_left">
    [...]
    </div>
    <div id="content_right">
    [...]
    </div>
  </div>
</div>
</body>
</html>

Code aus CSS-Datei -->
  body, html {
 margin:0px;
 padding:0px;
 background-image:url(../images/bg.jpg);
 background-repeat:repeat-x;
 background-color:#ffffff;
 height:100%;
  }
  #siteframe{
        width:800px;
 background-image:url(../images/bg_page.gif);
 background-repeat:repeat-y;
 background-color:#ffffff;
 margin:auto;
 height:100%;
  }
  #content{
 font-family:Arial, sans-serif;
 font-size:13px;
 color:#000000;
  }
  #content_left {
        padding:15px;
        width:590px;
        float:left;
        background-color:#ffffff;
  }
  #content_right {
        width:200px;
 float:right;
 background-color:#E3E9F2;
 padding:10px;
  }

Danke & Gruß Vanessa

  1. Hallo,
    dir scheinen einige "clearings" zu fehlen!

    <div id="content_right">
        [...]
        </div>
    <!-- hier mal eins hin -->
      </div>
    <!-- und hier auch, aber wahrscheinlich reicht es hier schon -->
    </div>

    .clearing {
     clear: both;
     font: 0em sans-serif; /* mit px wird der benötigte raum im opera - warum auch immer - größer */
    /* evtl. noch visibility:hidden */
    }

    nutzen mit:
    <p class="clearing">&nbsp;</p>

    mit <hr> geht es natürlich auch, damit hatte ich aber im IE teils probleme.

    1. Nachtrag:
      noch n margin:0; dazu ist wahrscheinlich angebracht.