overflow scroll | Sololearn: Learn to code for FREE!


overflow scroll

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?

7/13/2017 9:17:16 AM

Daan van IJcken

1 Answer

New Answer


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