Wie kan mij hiermee helpen?

Ik wil vier elementen gelijk verdelen over de volle breedte van een kolom

style

.container {
width: 800px;
}

.element {
float: left;
width: 108px;
}


in de body

<div class="container">

<div class="element">
fdsfsdfsd
</div>

<div class="element">
fdsfsdfsd
</div>

<div class="element">
fdsfsdfsd
</div>

<div class="element">
fdsfsdfsd
</div>

</div>

Je zou denken aan text-align: justify maar dat werkt niet.
De eerste staat tegen de linkerkant, de laatse tegen de rechterkant, de wituimte is dan overal gelijk

Alvast bedankt.
Als ik dat doe dan passen niet alle kollommen op het gedeelte wat ik wil.
Ik heb ergens gezien dat je divjes via display:inline ook netjes horizontaal centreren. Echter zet hij ze bij mij allemaal onder elkaar.
Zal het morgen eens gaan bekijken. Moet nu helaas aan het werk. Lijkt iig een oplossing te worden. Ik zie namelijk veel van die dingen ook bij #sidebar staan en ik denk dat er daar iets mis mee is.
Heb inmiddels de turorial doorgelopen en geupload. Echter zet hij de li dan langs elkaar.

Dit komt niet goed uit met de div layers. Elk lijstje wat je ziet is een andere div layer. Dit moet zo vanwege het gebruik van meerdere sidebars in Wordpress. Dat is meteen ook het probleem denk ik zelf.
De enige oplossing is een margin aan de elementen. De linkse 3 elementen geef je margin-right en het rechtse element een margin 0;
De elementen moet je een float: left; en een display: inline; meegeven, omdat anders ie6 raar gaat doen met de margins.

Dit is de makkelijkste oplossing.

css

.container {
width: 800px;
}

.container div {
float: left;
display: inline;
width: 108px;
margin: 0 116px 0 0; 
}
.container div.last {
margin: 0;
}


html

<div class="container">

<div>
fdsfsdfsd
</div>

<div>
fdsfsdfsd
</div>

<div>
fdsfsdfsd
</div>

<div class="last">
fdsfsdfsd
</div>

</div>
Thx Niek

Ik ga er later weer even verder mee stoeien.
Gerben

de template die jij gebruikt is onoverzichteljk, maar dat komt denk ik door de sidebars

http://vandiedingen.net/opmaak.jpg

de zou de basis moeten zijn

de page is een div width 100%

de content is een div gecentreerd width 760

de navbar een div width 100%
daarin de page (wordpress)

dan een footer als div width 760 gecentreerd

daarin vier div's display:; inline float:left

in de eerste komt links (wordpress)
in de tweede komt recent (wordpress)
in de derde komt (catergory)
in de vierde komt archive (wordpress)

de sidebar heb je niet eens nodig

<?php the_category('separator', 'parents' ); ?>

als je b.v. deze in de derde div zet krijg je een categorie lijst te zien

http://codex.wordpress.org/Template_Tags

hier vind je alle tags

ik heb het even snel opgezet, als je er even in duikt is het vrij makkelijk om een template te maken

succes ermee
Verrek dat is wel erg makkelijk zeg, echter de reden voor de vier sidebars is dat ik deze dan makkelijk via het backend kan vullen met van allerlei widgets. Ik zag op de codex pagina dat dit met bijvoorbeeld bovenstaande dan weer niet ging. Ga echter wel proberen alles om te gooien naar een iets overzichtelijkere layout.
Vind het trouwens wel erg jammer dat IE alles overhoop gooit. Ik heb hem nu tijdelijk in FF gemaakt zoals hij eruit moet komen te zien. Echter bij IE wordt hij dan helemaal wild van bij de lijsten. Het zijn allemaal li's alleen is die ene een extra h2 met zoals je al raad geen margin-left of right.
Heb je een linkje naar het geen wat je nu hebt?

Reageren