BEST BEST - 23 days ago 6
CSS Question

How to make 4 div (images inside them) to be next to each other but on small screen to wrap down

I am trying to use 4 div's inside in one master div to display 4 images next to each other, with "float:left;" it works but on smaller screen i am getting scrollbar, instead of that i want the images (div's) wrapped in new line on smaller screen...

Here is an example of my main code for that

<div class="first">
<div class="sec">
img 1
</div>
<div class="sec">
img 2
</div>
<div class="sec">
img 3
</div>
<div class="sec">
img 4
</div>
</div>


CSS:

.first {
width: 900px;
overflow: hidden;
}
.sec {
float:left;
width:200px;
display:block;
}


what i am missing here ? (or doing wrong)

Answer

Use max-width instead of width for the .first-class.

.first {
    max-width: 900px;
    overflow: hidden;
}

width sets a fixed width and doesn't allow the element to be neither wider or smaller. So if the screen is 500px, the element will still be 900px (and you get scrollbars).

max-width on the other hand, allows the element to be smaller, but not wider.