[CSS / HTML] Float problem?

[Verwijderd]

Mijn pagina bestaat uit een container. In deze container bevindt zich een header. Onder deze header heb ik 2 kolommen en daaronder weer een footer.

In IE werkt het prima, zodra ik de linker kolom vul met inhoud, groeit de rechter mooi mee. Datzelfde geldt visa versa...

In Firefox groeit links mooi mee met rechts... Maar zodra links meer inhoud krijgt, dan rechts, wordt het verschil over de footer en daaronder heen gegooid.

Het resultaat is hier te zien:

http://www.thugsserver.nl/test/2c-hd-ft-fixed.htm

Wat kan ik hier tegen doen?

[SchizoDuckie]

sim-pel zet dit stukje in je container waar je 2 kolommen in staan dus.:)

Cascading Stylesheet:

#container:after
{
    content: ".";
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden;
}

[mithras]

overflow:hidden op je container om de flow te breken. Denk wel aan faux collumn techniek om het gat in je container te dichten

[Verwijderd]

Paar puntjes:
1. Probeer div's altijd expliciet een position attribuut mee te geven, standaard is deze static en dat is niet helemaal het zelfde als relative al lijkt dat wel zo.
2. Als je wil dat een floating div geen content aan beide kanten heeft doe je dat zo: clear: both;
3. Als de bovenliggende div de hoogte van je floating div niet mee rekent probeer eens te spelen met overflow: auto;

Tip: floating divs kunnen ook relative zijn.

Hoop dat het helpt

[mithras]

Verwijderd schreef op woensdag 04 juli 2007 @ 11:47:
2. Als je wil dat een floating div geen content aan beide kanten heeft doe je dat zo: clear: both;

Zijn footer zit buiten de content en wordt ook niet meer gefloat. Het is een oude techniek om daarna maar een element met clear:both erin te zetten, welke feitelijk overbodig is doordat een overflow ook helpt (alleen is IE(6?) daarin buggy).

3. Als de bovenliggende div de hoogte van je floating div niet mee rekent probeer eens te spelen met overflow: auto;

Maak daar liever hidden van, omdat er wat browsers zijn die een scrollbar tonen terwijl je dat eigenlijk helemaal niet wil

[Verwijderd]

mithras schreef op woensdag 04 juli 2007 @ 11:46:
overflow:hidden op je container om de flow te breken. Denk wel aan faux collumn techniek om het gat in je container te dichten

THX

Echt bedankt voor jullie reacties! Ik zie een aantal nieuwe codes, die heb ik meteen gegoogled, dus meteen een stukje wijzer

[Verwijderd]

Maak daar liever hidden van, omdat er wat browsers zijn die een scrollbar tonen terwijl je dat eigenlijk helemaal niet wil

I rest my case.

Met overflow hidden kun je content-clipping krijgen, pas hiermee wel op.

[ Voor 15% gewijzigd door Verwijderd op 04-07-2007 12:37 ]