[CSS] Vreemd float probleem..

[Naatan]

Hey, ik werk altijd al vrij veel met CSS maar ben nu voor het eerst een layout van tables naar divs aan het converteren waar ontzettend veel div's naast elkaar komen te staan, op zich geen probleem maar ik heb een container div die als background dient voor de div's die daar in komen te staan, maar wanneer er enkel floats in staan word de container niet weergeven..

Code:

code:

<div style="background-color: blue; width: 100%;">
    <div style="float: left;">test</div>
    <div style="float: left;">test</div>
    <div style="float: left; width: 100%; clear: both;"></div>
    <div style="float: left;">test</div>
</div>

Demo: Klik

Iemand enig idee waarom?

[Jorick]

Je container div heeft geen hoogte. De divs floaten vrolijk buiten je container en daarom zie je niets. Geef de container eens een hoogte, of zet er voor de grap eens wat tekst neer onder de laatste div.
Je kan onder de laatste div binnen je container ook een <br style="clear:both"> zetten dan is het probleem ook opgelost.

Op deze site staat overigens wel nuttige informatie betreffende je probleem: http://css.maxdesign.com.au/floatutorial/

[ Voor 37% gewijzigd door Jorick op 25-07-2007 21:39 ]

[Naatan]

Ik weet wel WAT van css hoor

punt is dat ik de hoogte van de container niet altijd van te voren kan weten aangezien de content dynamic is, en tekst kan ik er wel bij zetten om te testen, en om te testen werkt dat, maar ik moet er helemaal geen tekst bij hebben..

[Verwijderd]

daarom moet je dus na al je floats op een of andere manier een clear:both doen. Die trekt dan automatisch je containter (met background) over de hele lengte (van je grootste float).

Speel desnoods een beetje vals door een soort van copy-right div te voorzien die altijd onderaan aan de pagina komt te staan en clear die.

[Jorick]

Mja ik kan niet ruiken hoe veel verstand je van CSS hebt natuurlijk . Maar dan zet je toch die br onder die divs? Of een spatie, andere tekst met dezelfde kleur als de achtergrond, nog een div zonder float met hoogte van 1px je kan het eigenlijk zo gek niet bedenken.

[ Voor 4% gewijzigd door Jorick op 25-07-2007 22:00 ]

[Naatan]

Het is omdat het ook divs van een regel betreft..

maar goed, ik heb het opgelost door te eindigen met een div waar "clear: both" staat,, dank voor jullie hulp