[CSS] Tabel structuur met div in Firefox prob

[Verwijderd]

Hoi

Ben bezig met een site. Deze site bouw ik op met behulp van div, ipv tabellen, etc.
Daarin heb ik een content page. Op deze content page worden dynamisch tabellen geplaatst. Deze tabellen bevatten gegevens die uit een database gehaald worden. De hoeveelheid tabellen is dus per pagina verschillend.

Ik wil deze kleine tabellen gecentreerd in de content naast elkaar en onder elkaar. Naar gelang de resolutie van het scherm en het aantal tabellen.
Ik deed dit door de elke tabel in een div met float left te zetten. Op deze manier worden er telkens 2 tabellen naast elkaar gezet, daaronder weer 2, etc (met > 1024*768)
Dit werkt goed in IE. Echter in Firefox vallen de tabellen dan allemaal buiten de content div. Deze sized niet mee.
Ik weet dat dit komt door de Float. Als ik float weg haal sized de content div gewoon goed mee. Echter komen de tabellen dan 1 voor 1 onder elkaar ipv met meerdere.

Ook krijg ik het niet voor elkaar de content in Firefox gecentreerd te krijgen.
Ik gebruik text-align: center. Dit werkt in IE perfect maar in Firefox niet.

Hoe kan ik dit oplossen?

alvast bedankt.

[-Lars-]

Verwijderd schreef op donderdag 17 februari 2005 @ 12:12:
Ook krijg ik het niet voor elkaar de content in Firefox gecentreerd te krijgen.
Ik gebruik text-align: center. Dit werkt in IE perfect maar in Firefox niet.

Dat text-align: center werkt is een fout in MSIE. Het werkt in FF met margin-left: auto; margin-right: auto;.

Voor je eerste probleem: de 'content div' een vaste breedte geven?

offtopic:
CSS hoort een forum hoger

[gorgi_19]

CSS en clientside zaken horen bij de bovenburen

>> Webdesign & Graphics

[T-MOB]

Dit komt doordat een float het element uit de flow haalt. In normaal Nederlands komt dat er op neer dat je div-jes met tabellen niet echt meer "in" hun container staan. Dit kun je oplossen door onder de tabellen het eerstvolgende element de propertie "clear: both;" mee te geven. (En je hoeft niet om elk element een <div>je te zetten. Je kunt ook gewoon de table zelf laten floaten.

code:

<div>
 <table></table>
 <table></table>
 <table></table>
 <table></table>
 <br />
</div>

Cascading Stylesheet:

body { text-align: center; } /* IE <6 centreer truuk prt 1 */
div { margin: 0 auto; text-align: left; } /* IE <6 centreer truuk prt 2 */
div table { float: left; }
div br { clear: both; }

[ Voor 56% gewijzigd door T-MOB op 17-02-2005 14:27 ]

[Verwijderd]

Dank je, ik ga het even proberen.

Kwam er achter dat er nog meer aan de code scheelt. En ga even de hele CSS langs om te kijken wat allemaal beter/netter kan.

Alleen zit ik nog met het probleem dat ik dus geen vast aantal tabellen gebruik, dus van te voren niet weet waar ik de <br /> met clear: both kan doen.

[ Voor 81% gewijzigd door Verwijderd op 17-02-2005 18:05 ]