[css] float:left // display:inline in Moz//IE

[ikke007]

Mijn probleem is als volgt:

ik heb een 12 tal tabellen (kalender) waarvan er maximaal 2 naast elkaar kunnen. De hoogte van deze tabellen kan varieren (geen - veel - weinig content erin)

als ik deze tabellen float: left; mee geef gaan ze inderdaad netjes naast elkaar alleen omdat sommige tabellen kleiner zijn kan het gebeuren dat tabellen niet netjes uitlijnen op de volgende lijn maar 'onder' tabellen schieten.

zie plaatje

verder werkt dit perfect. als iemand mij de oplossing voor deze uitlijning kan geven ben ik uit de brand.

(nb: het is dus de bedoeling dat maart en april weer op een volgende regel worden uitgelijnd onder januari en maart)


Poging twee van mij was om per 2 tabellen ze in een <div> te stoppen. Dit werkt wel, maar dan komen de tabellen onder elkaar ipv naast elkaar. zeg ik float: left gaan ze uit de flow en niet in de omlijnende div staan.
oplossing was dan om display:inline; te gebruiken. werkt super! valign:top; erbij, hoppa klaar dacht ik.. totdat ik mozilla bekeek welke er een op zijn minst gezegd *zooitje* van maakt...

Wie helpt mij uit de brand met de geweldige oplossing?

[Verwijderd]

om de 2 tabellen clear:both; gebruiken?

[ikke007]

Als ik dat doe komen ze weer allen onder elkaar staan omdat ze niet naast elkaar willen floaten...

[1st_Ro]

Of elke 1e tabel (de linker) een clear:left geven? (off the top of my head)

edit:
Had niet gelezen dat het om tabellen ging, sorry

[ Voor 46% gewijzigd door 1st_Ro op 11-11-2004 16:12 ]

[Verwijderd]

iKKe007 schreef op 11 november 2004 @ 16:02:
Als ik dat doe komen ze weer allen onder elkaar staan omdat ze niet naast elkaar willen floaten...

ik bedoel niet allemaal, maar tabel 1 niet en tabel 2 wel clear geven.
eehm of had je dat al gedaan

[crisp]

een display property hoort geen invloed te hebben op een floating element (het kan echter wel in IE een oplossing zijn voor de beruchte 3px floatbug )

[ikke007]

uhm.... grmbl

de eerste tabel clear:left geven werkt goed, maar dan krijg ik een ander probleem

mijn menu is geheel links gefloat... dus als ik de eerste tabel een clear:left geef gaat hij pas onder mijn menu flowen.

[1st_Ro]

Om al die tabellen (de kalender zelf dus) een DIV maken? (als container zeg maar)

[ikke007]

Oplossing gevonden!(weet niet of hij netjes is maar i don't care het werkt)

om de twee tabellen doe ik een <div class='spacer'></div> welke als css code enkel heeft
.spacer{
clear:both;
}
works like a charm (ookal krijg ik om de twee tabellen nu een div die enkel er is om te spacen

crisp schreef op 11 november 2004 @ 16:13:
een display property hoort geen invloed te hebben op een floating element (het kan echter wel in IE een oplossing zijn voor de beruchte 3px floatbug )

3px floatbug? nog nooit van gehoord maar kan je me wat uitleg geven, want ik merk wel dat mijn eerste float niet geheel netjes uitlijnt in IE en dat best weleens een pixel of 3 kan zijn....

Gevonden http://www.positionisever...explorer/threepxtest.html

damn.. SQL/PHP was altijd mijn ding, dat is tenminste overal hetzelfde.... maar CSS is echt bugs vs bugs vs bugs... grmbl

[crisp]

maar CSS is echt bugs vs bugs vs bugs...

voornamelijk in IE ja

[ikke007]

en wie gebruikt er dan nog IE... ow wait... 99% van de mensen.. darn

Bedankt voor de tips trouwens. Soms heb je net ff het gedachtensprongetje nodig om de oplossing te vinden....

[Rowanov]

nope, 69,9%