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.
Werk met percentages?

100% / 4 = 25%.


.container {
  width: 800px;
}

.element {
  float: left;
  width: 25%;
}


Als je nog met paddings/margins werkt zou ik het wel wat absoluter aanpakken, maar zonder dat zijn relatieve waardes al goed genoeg.
Thx

Maar dat is helaas niet wat ik bedoel.
De elementen zijn kleiner dan het totaal formaat.

http://vandiedingen.net/verdelen.jpg

Hier staat een voorbeeld.

Met een linker en rechter marge kan het ook niet, want met links of rechts een marge gaat hij niet tot aan de kant, of ze zijn niet gelijk.

Ik zit echt precies met hetzelfde probleem op dit moment. Ik ben bezig met een Wordpress theme te wijzigen tot mijn eigen stijl.

Na een aantal dagen de CSS eerst eens goed bekeken te hebben ben ik nu zover dat ik onderaan 4 divjes heb met dezelfde breedte.

Ik heb eveneens float left gebruikt en mijn breedte van de container 760 / 4 gedaan en vervolgens afgerond op 180px per divje. Heb daarbij margin-right:10px; gebruikt en nu staan ze redelijk netjes van elkaar af in IE en goed in FF. Echter het probleem is dat ze niet netjes in het midden gaan staan. Misschien een idee om toch eens met padding te werken als dat lukt.

een voorbeeld van mijn matige oplossing vindt je via:
www.gerbenvanerkelens.com/wp-content/themes/gve/style.css en dan bij het kopje footersidebar1 t/m 4.

Misschien heb je er wat aan.
Width: 19%;
margin: 4%;

Geef je de meest linker een margin-left van 0 en de meest rechter een margin-right van 0.

Kom je uit op (4 * 19) + (6 * 4) = 100

Maar als je container een breedte van 800px heeft hoef je toch niet met percentages te werken?
kan je ze niet gewoon een margin: auto geven? en dan de 4 divs met ul/li elementen een display:inline meegeven
maar dan zit je denk nog met de marges..


Geef je de meest linker een margin-left van 0 en de meest rechter een margin-right van 0.

Kom je uit op (4 * 19) + (6 * 4) = 100

Maar als je container een breedte van 800px heeft hoef je toch niet met percentages te werken?


De elementen komen door een script, ik kan ze allevier maar een dezelfde class geven

Het zou iets met text-align: justify of display: block moeten zijn, maar het lukt me nog steeds niet

De procenten hebben er niets mee te maken

De container is 800 de elementen 4x180=720 de rest is een tussenmarge (zie ook afbeelding)
http://www.beyondcommunications.nl/links.php?dir=Onderzoek

Hier ben ik mee bezig

Cijfers en feiten - Marketing - Marktonderzoek - World
moeten gelijk verdeeld worden over het witte vlak

Ik kan wel de formaten, de marge of padding aanpassen.
Want dan geef ik de elementen een marge van 5px en de container een padding left en right van 5px

Maar dan heb ik geen oplossing voor het probleem, want het komt wel vaker voor de je iets gelijk wil verdelen over de volle breedte.
En trouwens margin en padding geven nog wel eens verschillen met firefox en explorer.
Inderdaad daar zit ik zelf dus ook mee. FF en IE doen marges en padding vaak verschillend weergeven.

Bij mij wordt de ene div echter gecentreerd door margin: 0px auto;
Maar als ik die op de class linktank of linkcontainer gebruik dan gebeurt er niks.
Als ik jou was

zou ik de "foot_content" even breed maken als de <div id="page"> 760px
en dan centreren

<div id="foot_content">
<div id="sidebar">
<div id="footer-sidebar1">

dan de footer-sidebar1 width: 25%; maken met een padding-right: 5px

Reageren