Ik zit met het volgende probleem.Ik heb een site waarbij ik bovenin twee divs naast elkaar heb staan die bij een schermbreedte van minder dan 400px onder elkaar moeten komen.


Dit is mijn CSS code:
.wrapper-rev {


overflow:hidden;
}




#one-rev {


float:left;


width:48%;


}
#two-rev {


overflow:hidden;


min-height:120px;
}


@media screen and (max-width: 400px) {
#one-rev {
float: none;
margin-right:0;
width:auto;
border:0;

}
}



en dit mijn html code


<div class="wrapper-rev">
<div id="one-rev">blabla content links</div>
<div id="two-rev">
blalba content rechts
</div>
</div>

ANDERE CONTENT


Nu komt er bij schermen van 400px of minder de volgende bug naar voren:
De content van one-rev wordt fullwidth getoond, dan komt er een heel lang stuk witte pagina en dan het deel "ANDERE CONTENT".
Wat gaat er mis? en belangrijker nog.. hoe los ik het op?


Groeten David

Heb je al met de margin en padding geprobeerd? Je hebt nu alleen margin-right benoemd. Probeer ook een display:block. Als je een div laat floaten, krijgt hij automatisch ook een display:block mee. Met float:none niet. Maar die display:block heb je vaak wel nodig om margins, paddings en heights goed te laten werken.

Heb je niet een voorbeeld? Ik begrijp niet helemaal wat je bedoeld met een "heel lang stuk witte pagina". Volgens mij zou onderstaande code gewoon goed moeten zijn. Maar als je de website URL kan geven kunnen we het even goed bekijken.


.wrapper-rev {
overflow: hidden;
width: 100%;
}


#one-rev, #two-rev {
display: block;
float: left;
width: 50%;
min-height: 120px;
border: 0;
}




@media screen and (max-width: 400px) {
#one-rev, #two-rev {
float: none;
width: 100%;
display: block;
}
}

Hartelijk dank voor de reacties, de laatste oplossing heeft gewerkt. Kan als opgelost worden beschouwd!