Content läuft über den Footer, warum?

[ePole]

Hallo liebe Forenmitglieder,

ich bin ein absoluter Neuling im CSS und möchte mir nun eine eigene kleine HP bauen auf CSS Basis.

Ich habe das Problem das das Layout im IE und Opera Browser gut funktioniert, aber im Firefox und Safari nicht.

Könnt Ihr mir vieleicht erklären warum es so ist?
Mein Problem ist das der Text im Contentbereich bei Überlänge über den Footer hinausläuft. Aber der Footer soll sich in der länge des Contentbereiches nach unten schieben.

Hier mein Script:

Code: Alles auswählen

<style type="text/css">
html, body{
margin:0;
padding:0;
text-align:center;
}

#pagewidth{
margin-top:50px;
height: 900px;
width:1024px;
text-align:left; 
margin-left:auto;
margin-right:auto;
background-image: url(img/bg.jpg);
}

#header{
position:relative;
height:247px;
width:100%;
}

#leftcol{
width:437px;
float:left;
position:relative;
}

#maincol{
float: right;
display:inline;
position: relative;
width:587px;
height:200px;
}

#footer{
height:161px; 
clear:both;
}



/* *** Float containers fix: *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */ 



/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol{display:none;}
#twocols, #maincol{width:100%; float:none;}
}
</style>


<div id="pagewidth" >

<div id="header" >
<div id="date">DATUM</div>
<br><br>
<div id="language">language</div>
<br><br>
<div id="breadcrumb">{BREADCRUMB}</div>
</div>

<div id="wrapper" class="clearfix" >
<div id="maincol" > Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>
<div id="leftcol" > {NAV_TABLE_COLUMN} </div>
</div>
<div id="footer" > Footer
</div>
</div>


[ThomaZ]

Ein Link zur Seite wäre eventuell nicht schlecht um zu sehen wie es aussehen soll.
Das was du gepostet hast, ist ziemlicher Code-Müll (Sorry, klingt schlimmer als es soll ).

Du arbeitest verkehrt mit den floats. Besser gesagt mit zu vielen. Am besten liest du dir mal ein
schönes Tutorial zu Thema 'Float' und eines zum Thema 'Position' durch.
#maincol hat bei dir relative Position. Damit es aber sinn gibt, musst du dem Elternelement auch eine Position geben, und dann mit absoluter Position arbeiten.

Uff, ich glaube das klingt verwirrend

Gib deinem #maincol mal:

Code: Alles auswählen

    #maincol{
    position: absolute;
    right: 0;
    top: 0;
    width:587px;
}

Dann wirst du sehen ist er auch ohne float rechts und oben. Damit er sich mit der Absoluten
Position nicht am Browser Orientiert sondern am Elternelement (#pagewidth) musst du aber noch im Elternelement eine Position hinzufügen:

Code: Alles auswählen

#pagewidth{
    position: relative;
    top:0;
    left: 0;
    margin-top:50px;
    height: 900px;
    width:1024px;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    background-image: url(img/bg.jpg);
}

So, jetzt siehts noch nicht viel besser aus. Du hast einen Div Namens 'wrapper', dann benutz ihn doch auch.

Code: Alles auswählen

#wrapper{
position: relative;
}

So, nun wirst du sehen, ist es schon viel besser.

MfG


ThomaZ