[css] divs verspreiden over breedte omliggende div

[PdeBie]

Hoi allen,

ik heb een div, met daarbinnen 3 (of meerdere) andere divs. Deze divs wil ik graag gelijkwaardig over de hele breedte van de omliggende div verspreid hebben. Dus als de omliggende div breder wordt, spreiden de binnenste divs zich verder uit.

Ik dacht dat dit kon met onderstaande css, maar dat is dus helaas niet het geval. Alles lijnt nu in het midden uit onder elkaar.

HTML:

<div class="container">
    <div class="column">kolom 1</div>
    <div class="column">kolom 2</div>
    <div class="column">kolom 3</div>
</div>

Cascading Stylesheet:

.container { display: block; width: 100%; min-height: 150px; }
.column { border: 1px solid #F00; display:block; width: 150px; position: relative; left: 50%; margin-left: -75px; }

*border op column is enkel om de randen van de div te visualiseren. die komt later te vervallen.

Iemand een idee?

bijbehorende fiddle:
http://jsfiddle.net/6FWUM/

[418O2]

Laten floaten en de breedte en margins met percentages aangeven?

http://jsfiddle.net/6FWUM/3/

Als ik jou was zou ik even opzoeken hoe float's werken

Je kan het ook met css3 oplossen > http://css-tricks.com/old-flexbox-and-new-flexbox/

[ Voor 66% gewijzigd door 418O2 op 25-09-2012 12:45 ]

[PdeBie]

dat jsfiddle voorbeeld van je werkt met 3 kolommen goed, maar met 4 weer niet omdat je met een even aantal kolommen niet één maar twee exacte middelste hebt.
de minimale breedte van een kolom moet overigens 150px breed (breedte van een thumbnail die weergegeven wordt).

Ik kan het breedte percentage wel via inline-css programmeren bij het genereren van de kolommen. Kwestie van 100 gedeeld door het aantal kolommen en dan afronden naar een heel getal naar beneden.
De kolommen verspringen dan wel onder elkaar als het scherm te smal wordt naar verhouding van het aantal kolommen, maar dit is acceptabel.
Onderstaand lijkt dan ook goed te werken.

http://jsfiddle.net/6FWUM/7/

HTML:

<div class="container"> 
    <div class="column" style="width: 20%">kolom 1</div> 
    <div class="column" style="width: 20%">kolom 2</div> 
    <div class="column" style="width: 20%">kolom 3</div> 
    <div class="column" style="width: 20%">kolom 4</div> 
    <div class="column" style="width: 20%">kolom 5</div>
</div>

Cascading Stylesheet:

.container { display: block; width: 100%; min-height: 150px; } 
.column { display:block; float:left; min-width: 150px;}

[OkkE]

Als eerste een tip, gebruik ipv border voor het testen liever outline (of een achtergrond kleur), aangezien de border nog eens bij de breedte wordt opgeteld waardoor elementen soms niet passen (tenzij je box-sizing gebruikt) die zonder border wel passen.

Het is mij even niet duidelijk, wil je het zoals A, B of C:

code:

A: [|1||2||3|]  ->  [ |1| |2| |3| ]
B: [|1||2||3|]  ->  [|1|  |2|  |3|]
C: [|1||2||3|]  ->  [| 1 || 2 || 3 |]

Voor A kun je eens kijken naar text-align:center; op de parent en display:inline-block;margin:auto; of de children.

Voor B zal je denk ik toch met negatieve margin's en retative/absolute moeten werken.

Voor C kun je eenvoudig de width in procenten opgeven (evt. icm boz-sizing).

[PdeBie]

OkkE schreef op dinsdag 25 september 2012 @ 13:37:
Als eerste een tip, gebruik ipv border voor het testen liever outline (of een achtergrond kleur), aangezien de border nog eens bij de breedte wordt opgeteld waardoor elementen soms niet passen

Daar kwam ik ook achter inderdaad.

Maar optie C is de variant die gewenst is. Dus zoals ik die nu heb.

[Krilo_89]

pdebie schreef op dinsdag 25 september 2012 @ 13:48:
[...]


Daar kwam ik ook achter inderdaad.

Maar optie C is de variant die gewenst is. Dus zoals ik die nu heb.

Ga met grids werken. Met het 960 grid kun je ook fluid grids maken. Als je dan kolommen gaat gebruiken (kijk even hoeveel kolommen bij jou goed uitkomen), dan kun je het zo indelen dat je exact krijgt wat jij wilt.

Als ik uitga van het onderste voorbeeld, maar dan met 4 blokken, dan kun je je totale lay-out indelen in 16 kolommen. Wat je dan doet is dat elk blok uit 4 kolommen bestaat (wat totaal dus 16 kolommen is) en dat is dan de totale breedte van je website.

Zo worden ten alle tijde die 4 blokken naast elkaar gezet op je website, afhankelijk van je breedte van je scherm.

Volg je me nog? Het is namelijk een beetje lastig uitleggen.