[css ie/mac]twee floats naast andere float

[Verwijderd]

ik wil naast een grote, hoge div 2 kleine lage divjes onder elkaar zetten. Dat gaat simpel met deze code (online voorbeeld)

HTML:

<div style="width: 40%; background: #ddd; overflow: auto;">
    <div style="float: left; margin: 5px; width: 200px; height: 100px; background: #f90;"></div>
    <div style="float: left; margin: 5px; width: 100px; height: 40px; background: #f60;"></div>
    <div style="float: left; margin: 5px; width: 100px; height: 40px; background: #f60;"></div>
</div>

en het ziet er dan zo uit:

alleen in ie/mac komt het tweede kleine divje altijd onder de grote:

de twee kleine divjes samen in een containerdivje zetten kan niet, omdat ik wil dat de twee kleine divjes bij kleine beeldschermen naast elkaar onder de grote div komen te staan.

weet iemand een oplossing?

[ Voor 8% gewijzigd door Verwijderd op 16-03-2006 16:45 ]

[Fles]

Je kunt dit toch doen...

code:

<div style="width: 40%; background: #ddd; overflow: auto;">
    <div style="float: left; margin: 5px; width: 200px; height: 100px; background: #f90;"></div>

<div style="float: left">
    <div style="float: left; margin: 5px; width: 100px; height: 40px; background: #f60;"></div>
    <div style="float: left; margin: 5px; width: 100px; height: 40px; background: #f60;"></div>
</div>

</div>

Hij groepeert de twee in een div onder elkaar. Als het beeld te klein is zal de complete container div onder de grote verplaatsen, maar is breed genoeg om de twee naast elkaar te zetten.

Ik heb geen Mac dus kan het niet testen helaas...

[JHS]

Fles: Dat gaat niet werken. Dan komen de twee divjes naast elkaar te staan, als ze rechts van de grote staan.

Ik ben verder niet bekend met IE/mac, en heb ook niet de mogelijkheid om dat te testen.. Het is wel redelijk een hel af en toe om ook daar weer rekening mee te gaan houden, en ik zou afhankelijk van je doelgroep overwegen het maar gewoon te negeren. Oftewel: ik kan je niet helpen .

[Fles]

JHS schreef op vrijdag 17 maart 2006 @ 11:05:
Fles: Dat gaat niet werken. Dan komen de twee divjes naast elkaar te staan, als ze rechts van de grote staan.

De div vult gewoon in de breedte uit, en aangezien het document niet breder is, komen ze onder elkaar. Het enige probleem was het niet onder elkaar staan van de boxen op de Mac. In het voorbeeld van de TS komen ze ook naast elkaar als je het venster breder sleept. Niets anders dan die van mij. Maar ik denk dat de bug er wel mee gefixt is.

[JHS]

Fles schreef op vrijdag 17 maart 2006 @ 11:19:
[...] De div vult gewoon in de breedte uit, en aangezien het document niet breder is, komen ze onder elkaar.

Dat zou je misschien zeggen, maar als ik het test gebeurt het toch echt niet . Iniedergeval niet in Firefox, zie http://jaap.deviousness.c...s/leftfloats-special.html . Of doe ik daar iets fout .

[Fles]

Ah mijn oplossing was dus IE only Daar doet hij het wel gewoon...

[Verwijderd]

op de mac werkt zo goed, maar in FF blijven de divjes inderdaad naast elkaar staan. Ik snap alleen niet waarom...

[Verwijderd]

@JHS: in jouw voorbeeld staat

Cascading Stylesheet:

div#container_testdivs {
    float: left;
    200px;
}

daar bedoel je neem ik aan width: 200px;
met een fixed width komen de divjes dan wel onder elkaar, maar dan gaat het niet meer goed als ze naast elkaar onder de grote div moeten komen.

De doelgroep is overigens vrij klein, maar het gaat om een element dat helemaal bovenaan de homepage getoond wordt, en dan vind ik het niet zo'n lekkere binnenkomer.

[ Voor 23% gewijzigd door Verwijderd op 17-03-2006 11:46 ]