1 div 3 blokken 2 paddings

[baws]

Hallo,

Ik heb een div content van 980 px breed

Hierin wil ik een rij maken van 3 blokken breed.

Tussen deze blokken in wil ik 25 px ruimte dus het mot er zo uitzien:

<blok 310px> 25px ruimte <blok 310px> 25px ruimte <blok 310px>

Ik heb al het volgende:

 .producttegel
	 {
		
		margin-right:25px;
		margin-bottom:25px;
		float:left;
		width:310px;
		height:220px;
		background-color:#ffffff;
	 }

Maar nu krijg ik er maar 2 langs elkaar.
Kan iemand mij helpen zodat ik er 3 langselkaar krijg met 2 ruimtes ertussen?


//edit paddings moet margins zijn maar ik kan de titel niet wijzigen

 

[Haaren101]

je totale breedte wordt 3x310 + 3x25 = 1005 en dan is meer dan de 980 van je content

Ron

 

[baws]

Ok maar hoe zorg ik ervoor dat het wel past want ze moeten tot de rand komen

 

[csshunter]

Hoi baws,
Dan maak je binnen de #content een <div id="tegeldiv">, waar alle tegels in komen:

<div id="content">
	<div id="tegeldiv">
		<div class="producttegel"></div>
		<div class="producttegel"></div>
		<div class="producttegel"></div>

		<div class="producttegel"></div>
		<div class="producttegel"></div>
		... enz.
	</div>
</div>

Deze #tegeldiv geef je een breedte van 1005px: hier passen ze nu wel in (met aan de rechterkant een loze margin van 25px).
Je geeft deze div een {overflow: hidden;} zodat de achtergrond onder de tegels helemaal doorloopt, en wat er na de tegels komt, er onder komt te staan.

En dan de truc: de <div id="content"> geef je óók een {overflow:hidden;}. Hiermee wordt de rechterkant van de #tegeldiv afgesneden, en blijft het geheel toch 980px breed en gecentreerd in het midden.

• Test: producttegels.htm

Attentie: als de tegels een borderlijntje van bv. 1px moeten krijgen, zijn er per rijtje 6px in de breedte te veel. Als je de margins dan op 2px minder zet, is het totaal wat er per rijtje op moet: 3x breedte van 310px, 6x borderbreedte van 1px en 2x marginbreedte van 23px = samen 982px. De #content moet dan 982px worden om alles precies pas te krijgen. Maak je de tegelbreedte iets kleiner, dan moet je iets dergelijks doen.

Met vriendelijke groet,
CSShunter
_________
PS: Een padding L/R voor de #content kan geen kwaad: die wordt opgeteld bij de breedte van de #content. Alles kan dan verder hetzelfde blijven.

 

[baws]

Super.
Ik had verwacht dat de tegeldiv niet breder kon worden als de content div maar het werkte toch !