Twee divs uitvullen over de breedte

[Captain Pervert]

Ja ik weet even niet hoe ik het moet omschrijven, maar u snapt mij vast wel:



Ik ben bezig met een webshop. De artikelen worden getoond in een div. Om de tussenruimte te maken, is er een margin-right van 5px. Probleem is dat die margin-right dus ook voor het rechter-artikel wordt gebruikt, en dat de tussenruimte tussen het rechterartikel en het menu rechts veel groter is dan tussen het linkerartikel en het menu links.

Vraag: hoe zorg ik ervoor dat als een product-div links staat, hij helemaal links staat, en als hij rechts staat, dat hij dan helemaal naar rechts is uitgelijnd?

[Rekcor]

Je zou beide divs een andere class kunnen geven, en voor de ene class een margin-left en voor de andere class een margin-right definieeren.

[posttoast]

Wat Rekcor zegt. Als je die dingen door je backend laat uitspugen geef je gewoon een "even" en "odd" class mee, en aan de hand daarvan bepaal je die marges. Alternatief is een margin-left op je <li>'s en je <ul> een negatieve margin-left geven, maar dat veroorzaakt nogal onvoorspelbaar gedrag in verschillende browsers.

[ Voor 34% gewijzigd door posttoast op 22-01-2010 09:04 ]

[Verwijderd]

Eventueel zou je ze denk ik ook allebij een margin-left/right kunnen geven van 3. Dan wordt het ook gelijk, maar wel 1px groter.

[crisp]

Als het aantal artikelen per 'rij' fixed is en je ipv margin-right margin-left gebruikt zou je dat per rij kunnen wrappen in een div en met behulp van :first-child het eerste item een margin-left:0 kunnen geven. Dit werkt dan alleen niet in IE6

Het is nog even wachten op brede ondersteuning voor nth-child helaas...

Wat posttoast zegt kan ook, maar in plaats van een negatieve margin zou je nog met relative positioning kunnen werken. Het is volgens mij crossbrowser wel goed op te lossen dan zolang het containing element maar een fixed width heeft en eventueel overflow:hidden.

[Captain Pervert]

Probleem is dat die divs allemaal gebaseerd zijn op 1 div en dat er, in leesrichting, steeds een nieuwe bij wordt gezet naarmate er meer producten zijn (2 per rij).

Die child-technieken ken ik niet. IE6 kan me aan mijn reet roesten trouwens. Overigens ben ik nog wat aan het schuiven geweest met margins, ook van de layout waar de artikelopbouw ingeplakt zit, en ben nu dichtbij een goede verdeling.

[ Voor 42% gewijzigd door Captain Pervert op 22-01-2010 09:41 ]

[mcDavid]

Je kunt ook het rechtermenu een negatieve margin-left meegeven. Hoewel dat misschien een beetje een "hack" is... grote kans dat er dan ineens meer verschuift...

[SgtCaffran]

Ik zou de DIV gewoon een even grote margin-left geven als margin-right, zoals eerder vermeld. Maak deze dan 2px of 3px en het probleem is opgelost toch?

[geert1]

Wat ik zou doen is het volgende: Om al je producten samen doe je één grote container-div. Die maak je 10 pixels breder dan je content-vlak, en geef je een margin-right van -10px (negatief dus). Daarin plaats je zoveel product-divs als je maar wilt, allemaal met een margin-right van 10px. Zo werk je de extra marge rechts perfect weg.

Voorbeeldje: http://www.123laminaat.nl/Balterio_Senator.ashx

Even inspecten met FireBug (als je die niet kent, dan die eerst downloaden, is onmisbaar in client-side development).

Beter zou zijn om van je producten een li-tag te maken, en van de container een ul. Die kun je namelijk net zo stijlen als een div, en is semantisch gezien een stuk sterker. Maar dat staat los van je probleem.