Goedendag,

Ik heb een klein probleem..

Momenteel heb ik een div gemaakt met als width 100%.
In deze div zitten 5 div's van 20% width (maken samen 100%).

Dit resultaat zie je als je de website full screen hebt.
Op het moment dat je de webbrowser verkleint dan verkleint de width ook van de div's.

Nu is mijn vraag:
Ik wil graag width 100% met daarin 5 vakken, deze vakken moeten de hele width vullen.
Maar als de browser verkleint wordt blijven die vakken hun width houden, en moet de browser indien de vakken niet passen deze een regel naar beneden gooien.

Weet iemand hoe dit moet?

float left meegeven?

daar zijn meerdere oplossingen voor, bv responsive maken of
en das meest eenvoudige de divs een min-width geven van bv 200px
wordt het scherm smaller dan zullen ze onder elkaar komen te staan,

Dit is mijn code;

.s2, .s4, .s6, .s8, .s10, .s12, .s14, .s16{ background: #475F77;
height: 296px;
float: left;
width: 20%; }


.s3, .s5, .s7, .s9, .s11, .s13, .s15
{ background: #354B5E;
height: 296px;
float: left;
width: 20%; }

Maar omdat width: 20% meekrijgt verkleint hij de div's altijd tot 20% van het beeld.
Ik kan wel een vaste width meegeven, maar dan krijg ik ze nooit 100% breed..

Origineel gepost door Steven H

daar zijn meerdere oplossingen voor, bv responsive maken of
en das meest eenvoudige de divs een min-width geven van bv 200px
wordt het scherm smaller dan zullen ze onder elkaar komen te staan,

Ik zou dat best willen doen, maar de 5 vakken zijn nu 20%.
Denk dat ik met het geven van een min-width niks kan..

Maar omdat width: 20% meekrijgt verkleint hij de div's altijd tot 20% van het beeld.
Ik kan wel een vaste width meegeven, maar dan krijg ik ze nooit 100% breed..

hij verkleint ze dan tot 200px niet verder, dus niet altijd,.. ik begrijp ook niet precies je
vraag maar wat ook zou kunnen werken voor je ?,

min-width :20%
max-wdth:100%;

verder zou je je css aan kunnen passen naar schermgrootte das wellicht beter,.

Ik probeer het beter uit te leggen:

De container om deze div's heen is 100% breed.
En hebben een hoogte in px.

Op full screen ziet het er zo uit:


Wanneer ik mijn browser verklein gaat het er zo uit zien:


De breedte verkleint zich nu, terwijl ik die standaard op 1 grootte wil houden.
Op het moment dat de browser verkleint moet hij dus de vakken even groot houden als full screen, en indien het dus niet meer past moet dit naar onder verschuiven.

Voorbeeld:
http://www.elegantthemes.com/demo/?theme=Origin

Op full screen heb je 4 foto's op een rij, maar wanneer je hem verkleint past die de regels aan naar 3.

kun je dan de divs geen vaste pixels breedte geven ?

Origineel gepost door Steven H

kun je dan de divs geen vaste pixels breedte geven ?

Dat kan ik wel, maar hoe krijg ik dan mijn div's tot de volle 100%?
Want als ik ze nu een breede geef laat zeggen 200, dan is de totale breedte 1000px.

Als iemand 2000px breed beeld heb hou ik 1000px vrije ruimte over..

das waar, maar wat wil je precies dan ?

beeld 1000px 5 X 200
beeld 2000px 5 X 400
dus toch vergroten en verkleinen ?

dan is 20% wel juist en zou je probleem zitten in de hoogte van de divs niet niet meegaan bij resizen is dat het ?

Het probleem is als volgt;

Beeld 1000 px, vakken van 20% (200px).
Bij full screen is die dan volledig 1000px.

Maar wanneer ik hem resize (de webbrowser) naar b.v 800 px, zijn de vakken in de breedte kleiner. (20%, 160px)

Ik wil dat de vakken dan eigenlijk de eerste groote aanhouden, en hierdoor valt 1 vak dan naar regel 2 (eronder).

Hoop dat dit duidelijk is.

jQuery CSS (fixed width) via $( document ).width() zou een oplossing kunnen zijn? Bij herladen van de pagina gaat dit uiteraard verloren.

EDIT: Ik heb zojuist je voorbeeld bekeken en zeg ook: width:20%; en min-width ic.m. float:left;

ja dan is width:200px; wat je wilt gok ik ?. alleen je probleem zou dan worden
dat bij resize 1 eronder valt en de resterende 3 niet de 100% opvullen wat vreemd lijkt denk ik,

dan misschien dit proberen :

min-width:200px;
eventueel dan :
max-width:100%;

en geen width specificeren, of width:auto; maar dat kan de zaak ook weer vernaggelen -),.

ik heb wat met jQuery liggen stoeien...

kijk voor het resultaat op www.kaylinn.nl

Zoals ik het begrijp wil je dat de vakken altijd dezelfde breedte hebben, dus dan gebruik je op de divs voor de vakken gewoon een fixed width, bijvoorbeeld {width: 200px;}. Hoe breder het scherm, hoe meer vakken er naast elkaar zullen komen.

Als je wilt dat er maximaal 5 vakken naast elkaar komen geef je container een width van 100% en een max-width van 1000px.