Hallo,

Op dit moment heb ik een div van 100% breed. Wat ik nu wil is dat wanneer de browser 1000px of breder wordt, de div 1000px wordt. Dit doe ik met het volgende stukje CSS:


@media (min-width: 1000px)
{
	div.global-container
	{
		margin: 0px auto;
		width: 1000px;
	}
}


Het probleem is, wanneer er een verticale scrollbar aanwezig is op de pagina, dan past de div van 1000px natuurlijk niet op een pagina van 1000px en dus vormt zich een horizontale scrollbar.

Ik heb voor mijn gevoel het hele internet afgezocht maar kan geen enkele (goede) oplossing vinden voor dit probleem. Hebben jullie misschien een idee hoe ik dit fatsoenlijk kan oplossen?

Alvast bedankt!
Nee, die 2 divs zitten weer in global-container, die zouden beide 500px zijn (of kleiner, als de pagina kleiner wordt dan 1000px), maar als ik max-width gebruik én media queries, dan verspringen ze volgens mij niet op hetzelfde moment.
Dat is een kwestie van afstemmen.
Media-query op 1001px in laten gaan voor lager dan 1000.


Standaard:
<div> width: 50%;
global-container: max-width: 1000px;

En dan, met media-queries, onder de 1000px veranderen naar:
<div> width: 100%;
global-container: max-width: 100%;

Reageren