je hebt twee aparte problemen:
1. clearing floats
Je linkerkolom is blijkbaar een float (float: left;). Dit heeft een aantal consequenties. Ten eerste wordt een float uit de documentflow gehaald, waardoor deze geen invloed heeft op de hoogte van het omhullende element. Daardoor zie je in o.a. Firefox dat je linkerkolom buiten je footer gaat. In internet explorer geeft dit geen problemen omdat IE floats verkeerd interpreteert en wel invloed laat hebben op het omhullende element.
Oplossing:
Normaal:
http://annevankesteren.nl/archives/2005/03/clearing-floats "Super simple clearing floats".
In jouw geval lijkt de beste oplossing om bij je footer clear: both; te zetten, dit maat dat er geen floats voorbij je footer mogen komen.
2. table-cell layout
Je wilt dat net zoals bij een tabel twee cellen dezelfde grootte hebben. Dit gaat met display: table-cell; en omhullend display: table; (als ik mij niet vergis). De ondersteuning daarvan is nogal buggy, zeker in IE. Daarom wordt idd vaak 'faux columns' gebruikt. Ik gebruik voor onze site de procentuele variant van faux columns.
ik zie dat je vaak {} < > en andere tekens gebruikt, eigenlijk zijn dit layoutelementen. Dit is af te raden, vervang deze door achtergrond afbeeldingen in CSS (NB: dit zal niet overal mogelijk zijn, desnoods een beetje wijzigen aan de plaatsing van >> en {.). Zo heeft je stylesheet volledige controle over je layout en als je uitgekene bent op { en > moet je niet in je cms gaan knoeien.
Pas ook voor divitis, geen overbodige divs, geen divs waar semantisch betekenisvollere elementen kunnen gebruikt worden zoals h2, ul, ... .
Aanmelden
Registreren
FAQ
Zoeken
