Images gird layout with horizontal scroll

Question

This is what I'm trying to build. The squares should be square images.The numbers show in whitch order they should be added to the layout. I posted a similar question but I need to add new small square images at the right end. Also the whole thing should be horizontal scrolable.

Here is a FIDDLE with the code I have :

HTML :

<div id="big_wrap">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="small_wrap">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS :

div {
    float:left;
}
div > div{
    background:#2C3E50;
}
#big_wrap,#small_wrap{
    width:50%;
}
#big_wrap > div{
    width:48%;
    padding-bottom:48%;
    margin:1%;
}
#small_wrap > div{
    width: 31%;
    padding-bottom : 31.3%;
    margin:1%;
}

Answer 1

To make your layout horizontaly scrollable, you need to make the container wider than the viewport. You can add body{width:120%;} for that.

Then you just need to append an other column to your layout and fix the with of the existing ones so the sum of the width of all columns equals 100%.

If you need to add some content inside the squares, I recommend you have a look at this answer.

Here is a FIDDLE

And the code.

Add this to your HTML :

<div id="right_col">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS :

body{
    width:120%;
}
div {
    float:left;
}
div > div{
    background:#2C3E50;
}
#big_wrap,#small_wrap{
    width:43%;
}
#right_col{
    width:14%;
}
#big_wrap > div{
    width:48%;
    padding-bottom:48%;
    margin:1%;
}
#small_wrap > div{
    width: 31%;
    padding-bottom : 31.3%;
    margin:1%;
}
#right_col > div{
    width:95%;
    margin:2.5% 5% 5% 0;
    padding-bottom:95.1%;
}

The width/padding bottom of the elements might need some tweaking to they all have the same size.