Probleme mit float und Seitenlänge
Vanessa
- css
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
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"> </p>
mit <hr> geht es natürlich auch, damit hatte ich aber im IE teils probleme.
Nachtrag:
noch n margin:0; dazu ist wahrscheinlich angebracht.