[CSS] "float:left;" maar toch gecentreerd?

[Duroth]

Ik ben bezig met een (persoonlijk) knutselprojectje, zodat ik wat ruimte voor mezelf heb om me wat verder te verdiepen in bepaalde zaken waar ik normaal nauwelijks gebruik van maak (Ajax calls, wat uitgebreidere mySQL queries, etc), en daarvoor heb ik gekozen voor een persoonlijke startpagina.

Deze zou ik graag enigszins willen doen lijken op www.symbaloo.com/nl, maar met wat subtiele verschillen erin. Zo gaat Symbaloo uit van een vaste breedte, en ik zou graag zo veel mogelijk gebruik willen maken van de beschikbare ruimte op mijn (breedbeeld-)scherm.

Om dit te realiseren maak ik gebruik van het CSS float-element om elementen op blokniveau (in dit geval DIV'jes) naast elkaar te krijgen. Werkt ideaal, en op volledig scherm ziet het er dan ongeveer zo uit:

code:

| [div] [div] [div] [div] [div] |
| [div] [div] [div] [div] [div] |
| [div] [div] [div] [div] [div] |

Het probleem waar ik echter tegenaan loop, is dat wanneer de beschikbare ruimte ook maar enigszins afwijkt (kleinere / grotere resolutie, niet gemaximaliseerd scherm), er aan de linkerkant een lege kolom kan ontstaan, omdat er net niet genoeg ruimte is voor een (80px) breed DIV-je.

code:

| [div] [div] [div] [div]     |
| [div] [div] [div] [div]     |
| [div] [div] [div] [div]     |

Als het mogelijk is, zou ik dus de DIV-jes zoveel mogelijk naast elkaar willen hebben, waar ze net als nu automatisch naar een nieuwe regel springen, maar daarnaast wil ik ook dat de linker- en rechter 'margin' gelijk zijn, dus zonder deze een vaste waarde mee te geven.

Kan iemand mij vertellen of dit enigszins mogelijk is, en zo ja, waar ik rekening mee moet houden om dit effect te bereiken?

[f.v.b]

Deze combinatie ben ik nog nergens tegengekomen. Als je javascript gebruikt kan het natuurlijk wel. Je zet dan de margin-left op de containing div gelijk aan (window-breedte % 80) / 2.

In IE kan je dit soort berekeningen in CSS doen. Op die manier kan je kijken of het de moeite waard is. Onderstaande code is niet getest!

Cascading Stylesheet:

#container
{
  margin-left: expression((documentElement.clientWidth % 80) / 2);
}

Hmm. Hier moet natuurlijk nog ergens 'px' aan toegevoegd worden...

[ Voor 7% gewijzigd door f.v.b op 17-01-2008 21:54 . Reden: px vergeten.... ]

[Verwijderd]

Dat javascript is echt niet nodig, met css is het heel gemakkelijk om gewoon even een container te maken die zich in het midden van de body bevindt. De rest lijkt me dan verder geen probleem

[Duroth]

Verwijderd schreef op donderdag 17 januari 2008 @ 22:28:
Dat javascript is echt niet nodig, met css is het heel gemakkelijk om gewoon even een container te maken die zich in het midden van de body bevindt. De rest lijkt me dan verder geen probleem

Feit is hierbij wel, dat deze containter een variabele grootte moet hebben van 90*n, waarbij n een rond getal is. Met een container zit je vast aan een vaste breedte helaas.

Ik heb het uiteindelijk gewoon met Javascript opgelost.

JavaScript:

function fixSideMargins() {
    document.body.style.marginLeft = ((document.body.clientWidth % 90) / 2) + 'px';
    document.body.style.marginRight = ((document.body.clientWidth % 90) / 2) + 'px';
}

En zo werkt het prima, komen alle div-jes netjes in het midden te staan.

Bedankt f.v.b voor de gouden tip!

[Verwijderd]

Ik had er even overheen gelezen dat je ze zo dicht mogelijk bij elkaar wilde hebben, dan is dit waarschijnlijk een mooie oplossing idd.