[CSS] Relative & Absolute

[Levi Strauss]

Ik wil een footer maken, waarin de copyright van de website staat waar ik mee bezig ben.
Nu is het zo dat ik ook een merkje naast de copyright wil hebben, maar wel buiten de footer inhoud.

Hier stukje van de HTML & CSS zodat je misschien begrijpt wat ik bedoel.

HTML:

<!-- Content -->
<div id="maincontent">

<div class="left">
Inhoud left
</div>

<div class="right">
Inhoud right
</div>

<!-- Footer -->
<div id="footer">
<img class="copyright" src="image/footer/Copyright.jpg" />
<img class="logo" src="image/footer/logo.jpg" />
</div>
<!-- Einde Footer -->

</div>
<!-- End Content -->

Cascading Stylesheet:

#maincontent {
    position: relative;
    margin: 5px 10px 0px 10px;
    width: 580px;
    
    line-height: 20px;
}

#maincontent .left {
    width: 440px;
    float: left;
}

#maincontent .right {
    width: 130px;
    float: right;
}

/* Footer */
#footer {
    position: relative;
    margin: 10px 0px 10px 0px;
}

#footer .copyright {
    position: relative;
    float: right;
}

#footer .logo {
    position: absolute;
    right: -100px;
    top: -5px
}
/* End Footer */

Nu is het dus zo dat in Internet Explore het 'logo' naast de copyright komt te staan (wat de bedoeling is). Maar echter in Firefox komt het 'logo' naast de #maincontent div.

Wat doe ik fout? Want als je een div 'position: relative' geeft worden toch alle child's die 'absolute' in die div zitten van uit de hoek berekend van de parent div die een 'relative' position heeft gekregen?

Alvast bedankt!

[crisp]

Je cleared je floats ook niet (.left en .right); het effect dat je nu ziet in IE is iig niet volgens specificatie

[Levi Strauss]

Floats niet ge-cleared? Wat bedoel je hier mee?

[Helmet]

geef je footer css eens

Cascading Stylesheet:

clear: both;

[ Voor 5% gewijzigd door Helmet op 04-04-2007 23:23 ]

[Levi Strauss]

Dankje! Dat werkt, wat doet dit dan precies?

Bedankt iig!!

[Verwijderd]

Levi Strauss schreef op woensdag 04 april 2007 @ 23:35:
Dankje! Dat werkt, wat doet dit dan precies?

Bedankt iig!!

http://www.w3schools.com/css/pr_class_clear.asp. Eerste hit in google. Owowow

ff wat meer info uit mijn hoofd: Een block element met een float geeft geen hoogte door aan het element dat er onder komt (In IE 6, 7 weet ik niet, gebeurt dit wel) Je footer weet dus niet op welke hoogte hij moet komen. Door je footer een clear te geven weet hij dit wel. Met clear houdt de float dus op. Snap je het nog??

[ Voor 38% gewijzigd door Verwijderd op 05-04-2007 09:41 ]