overflow scroll

Question

I have a group of images which I want to go next to eachother regardless of the website width.

<div class="picture_row">
<div class="picture">
<a href="#">
<img src="picture1.jpg"></img>
</a>
</div>
<div class="picture">
<a href="#">
<img src="picture2.jpg"></img>
</a>
</div>
<div class="picture">
<a href="#">
<img src="picture3.jpg"></img>
</a>
</div>
<div class="picture">
<a href="#">
<img src="picture4.jpg"></img>
</a>
</div>
</div>

and the css
.picture_row {
width: 100%;
float: left;
white-space: nowrap;
overflow-x: auto;
}

.picture {
float: left;
}

.picture img {
width: 100%;
height: 100%;
}
@media screen and (min-width: 950px) {
.picture {
width: 50%;
}
}
@media screen and (min-width: 1550px) {
.picture {
width: 33%;
}
}
if I use this code the pictures will go underneath eachother when there is no space left in one line. Does anyone know how I can stop this and have all pictures on one line?

Answer 1

create a wrapper class that will contain everything element and give it a width of more than 100%. It might work.