[CSS] Div's in een row, hoe doen jullie het met marges?

[Stalkert]

Een praktisch vraagje. Ik wil wel eens weten hoe jullie dit netjes oplossen.

situatie:
Je hebt een div van 750px (row)
Hierin komen 3 divjes van 200px, tussen de divjes (gutter) wil je een ruimte van 50px

dit wordt dus 200 .. 50 .. 200 .. 50 .. 200

nu ziet de html er bijv. zo uit:

code:

<div class="row">
   <div clasx="box">foo</div
   <div class="box">bar</div
   <div class="box">bla</div>
</div>

De css van box zal voor alle 3 gelijk zijn, behalve voor de margin(left of right) voor de 3e box, deze wil je eigenlijk op 0 zetten.

Is dit in css op te lossen zonder dat ik bij een nieuwe class moet benoemen voor de laatste (box_third), ik vind dit namelijk niet zo netjes en flexibel.

Iemand?

[XWB]

last-child ?

Ik gebruik vaak een extra class, daar is op zich niks mis mee.

[mithras]

Meestal zet ik er een margin right op en dan is je container zo passend dat je 3 blokken + 3 margins erin kan zetten. Dat lukt me tot nu toe wel met alle mogelijke designs die ik krijg aangeleverd.

Je kan, mocht je echt de container willen beperken tot 3*200 + 2*50 pixels, kan je hem een width 700px meegeven en een overflow van hidden. Dan valt de margin van de derde div ook nog weg achter de rand van je container

Hacku schreef op zondag 04 oktober 2009 @ 22:07:
last-child ?

Ik gebruik vaak een extra class, daar is op zich niks mis mee.

Was het maar zo'n feest dat alle browsers hetzelfde deden

[ Voor 26% gewijzigd door mithras op 04-10-2009 22:11 ]

[TeeDee]

Je bent toch geen table met "divjes en css" aan het maken he?

[XWB]

mithras schreef op zondag 04 oktober 2009 @ 22:09:
[...]
Was het maar zo'n feest dat alle browsers hetzelfde deden

Als je geen IE6 moet ondersteunen kan het prima.

[Stalkert]

mithras schreef op zondag 04 oktober 2009 @ 22:09:
Meestal zet ik er een margin right op en dan is je container zo passend dat je 3 blokken + 3 margins erin kan zetten. Dat lukt me tot nu toe wel met alle mogelijke designs die ik krijg aangeleverd.

Je kan, mocht je echt de container willen beperken tot 3*200 + 2*50 pixels, kan je hem een width 700px meegeven en een overflow van hidden. Dan valt de margin van de derde div ook nog weg achter de rand van je container
[...]
Was het maar zo'n feest dat alle browsers hetzelfde deden

Ik zoek een oplossing zodat hij mooi naar de volgende row float als het er meer dan 3 zijn. Ik denk dat dat overflow hidden dan niet gaat werken.

[Stalkert]

TeeDee schreef op zondag 04 oktober 2009 @ 22:11:
Je bent toch geen table met "divjes en css" aan het maken he?

Na ja, een tabel gebruik ik eigenlijk alleen maar als ik echt een tabel nodig heb, bijv weergeven van data.
Verder gebruik ik ze liever niet, je stop dan toch design in je html en daar hoort het wat mij betreft niet thuis.

Om een voorbeeld te noemen. Ik wil de divjes op een iphone onder elkaar laten zien. snapje

[Copyman]

Hacku schreef op zondag 04 oktober 2009 @ 22:13:
[...]


Als je geen IE6 moet ondersteunen kan het prima.

:last-child gaat niet werken in IE, :first-child wel.

@Stalkert: Ik gebruik zelf vaak een last class. Maar als de layout het toelaat ga ik ook wel eens voor een overflow: hidden oplossing zoals mithras (container met overflow hidden -> inner met breedte van container + extra margin -> blocks).

Stalkert schreef op zondag 04 oktober 2009 @ 22:18:
[...]
Ik zoek een oplossing zodat hij mooi naar de volgende row float als het er meer dan 3 zijn. Ik denk dat dat overflow hidden dan niet gaat werken.

Kan prima.

HTML:

#wrap {
    width: 700px;
    overflow: hidden;
}

#inner {
    width: 750px;
}

.block {
    float: left;
    margin: 0 50px 50px 0;
    width: 200px;
    height: 200px;
}

<div id="wrap">
    <div id="inner">
        <div class="block">Block</div>
        <div class="block">Block</div>
        <div class="block">Block</div>
        <div class="block">Block</div>
        <div class="block">Block</div>
    </div>
</div>

[ Voor 21% gewijzigd door Copyman op 04-10-2009 22:30 ]

[Stalkert]

Dit is inderdaad een mooie oplossing!

[_Thanatos_]

Als het nou een wat grotere website wordt, zou ik een grid-framework aanraden. Ik heb er zelf nog geen ervaring mee, maar ik weet wel dat zo'n framework dit soort triviale problemen kan oplossen. Geen gezever meer met positionering en pixelneuken.

Van de andere kant, voor grote websites hoor je eigenlijk de expertise te hebben om dit soort triviale dingen zelf op te lossen, dus wie weet wordt het een kleintje

[MoietyMe]

Als je website dynamisch is dan kun je natuurlijk gewoon met ASP/PHP een class toevoegen aan de derde div. Zo doe ik dat ook altijd, aangezien :last-child of nth-of-type(3n) niet ondersteunt wordt door IE6.

Vind ik overigens een nettere oplossing dan wat Copymouse aandraagt. Al moet ik zeggen dat ik dat wel een creatieve oplossing vind.

[ Voor 24% gewijzigd door MoietyMe op 05-10-2009 05:20 ]

[TeeDee]

Stalkert schreef op zondag 04 oktober 2009 @ 22:20:
[...]
Na ja, een tabel gebruik ik eigenlijk alleen maar als ik echt een tabel nodig heb, bijv weergeven van data.
Verder gebruik ik ze liever niet, je stop dan toch design in je html en daar hoort het wat mij betreft niet thuis.

Om een voorbeeld te noemen. Ik wil de divjes op een iphone onder elkaar laten zien. snapje

offtopic:
Dat snap ik, maar de class 'row' deed bij mij wat belletjes rinkelen

[mithras]

Good Fella schreef op maandag 05 oktober 2009 @ 05:19:
Als je website dynamisch is dan kun je natuurlijk gewoon met ASP/PHP een class toevoegen aan de derde div. Zo doe ik dat ook altijd, aangezien :last-child of nth-of-type(3n) niet ondersteunt wordt door IE6.

Vind ik overigens een nettere oplossing dan wat Copymouse aandraagt. Al moet ik zeggen dat ik dat wel een creatieve oplossing vind.

Ik doe het eigenlijk altijd zo (zoals ik al zei), maar dan eerder met unordened lists. Vaak heb je het over portfolio items, categorieën, producten in je eCommerce systeem en dat soort dingen. Dus gewoon een container item welke de breedte beperkt, de list items laten floaten in de lijst-omgeving die juist wat breder is dan de container. Werkt bij alle browsers lekker

En daarnaast, ik heb ook gekeken naar last-child ondersteuning in IE7, maar die is ook nog beperkt. first-child werkt dan wel, maar last-child is weer lastig. Dus nog steeds een no-go (IE6 ondersteunen hoeft van mij nl niet meer)

[ Voor 12% gewijzigd door mithras op 05-10-2009 12:23 ]

[tec]

dan zet je toch de margin aan de linker kant en hef je hem bij het eerste element op door middel van :first-child.

[mithras]

En als je niet met een vast aantal in een rij werkt, maar gewoon een lijst van x elementen in een blok met y op een rij?
Last-child gaat dan ook niet werken, dat dan weer wel.

[Verwijderd]

Ik zou het zo doen:

HTML:

<div id="wrapper">
    <div class="block clear">Left</div>
    <div class="block center">Main</div>
    <div class="block">Right</div>
</div>

Cascading Stylesheet:

#wrapper {
    width: 700px;
    overflow: hidden;
    }

#wrapper .block {
    width: 200px;
    float: left;
    }

#wrapper .center {
    margin: 0 50px;
    }

.clear {
    clear: both;
    }

Ik weet niet of je de 'clear: both' nodig hebt, maar dan begint elke 1e, 4e, 7e etc. div netjes aan de linkerkant. Wat nog netter zou zijn is om de boxjes een vaste height mee te geven en een margin aan de onderkant van ook 50 pixels. Dan kan je de 'clear: both' vergeten.

[ Voor 29% gewijzigd door Verwijderd op 08-10-2009 10:18 ]

[--MeAngry--]

Persoonlijk vind ik de oplossing van Copyman het beste omdat deze het meest flexibel is. Als je het in je PHP/ASP gaat afhandelen krijg je dat je aan een vast aantal kolommen vast zit. Wat als je nu later een andere vormgeving maakt, met een ongeveer gelijke layout, maar met 4 kolommen. Dan moet je je code weer gaan aanpassen op de weergave.

Heel vaak geen probleem, maar om die reden is de oplossing van Copyman wel de meest universele.

[joint_me]

Verwijderd schreef op donderdag 08 oktober 2009 @ 10:12:
Ik zou het zo doen:

HTML:

<div id="wrapper">
    <div class="block">Left</div>
    <div class="block center">Main</div>
    <div class="block">Right</div>
</div>

Cascading Stylesheet:

#wrapper {
    width: 700px;
    overflow: hidden;
    }

#wrapper .block {
    width: 200px;
    float: left;
    }

#wrapper .center {
    margin: 0 50px;
    }

Eventueel kan je natuurlijk ook javascript/ jQuery gebruiken. Vooral met jQuery (of ander framework) kan je gemakkelijk een dom element selecteren en daarvan de css, class, etc. aanpassen.

Nadeel, werkt niet op browsers zonder javascript.

[ Voor 13% gewijzigd door joint_me op 08-10-2009 10:22 ]