I've been busy working on a responsive webpage and so far, everything is going smoothly. The only issue I'm facing is that when the browser window size decreases and reaches a certain point, the div elements jump to the next line. Take a look at my code below:
HTML:
<div id = "wrapper">
<div class = "divs">
This is div 1
</div>
<div class = "divs">
This is div 2
</div>
<div class = "divs">
This is div 3
</div>
</div>
CSS:
.divs{
width:100px;
float:left;
background-color: red;
margin-left: 10px;
text-align:center;
}
#wrapper{
width:400px;
}
@media screen and (max-width:399px){
#wrapper{
width:100%
}
.divs{
width: 33.33%;
}