How to arrange many divs side by side and one under the other

Question

Here is what I want to do;

Pinterest

Let's say I have 10 or more rectangular divs. I want to put those divs 5 of them side by side and the other 5 of them are under the others. My question is;

How should I name the divs ? Should the class name change for every div or the IDs change or Should I give;

float:left

attribute to all divs to let them align side by side. So the other five will be placed under them when there is no place horizontally.

I mean how should the structure of these 10 divs (or more) be ?

Answer 1

You may find the Wookmark JQuery pluggin useful. Its like Masonry but I think its easier. Put all your images inside a div, reference it in the <script></script> and it will basically give the same effect as Pininterest.

Answer 2

If you use class you can use it for several objects without changing the name.
Try this:

<style>
.container {
    overflow:auto;
}
.sidebyside {
    float:left; 
    width:100px; 
    height:100px; 
    border-style:solid; 
    margin:5px;
}
.belowdiv {
    width:300px; 
    height:100px; 
    border-style:solid; 
    margin:5px;
}
</style>

<div class="container">
    <div class="sidebyside">div0</div>
    <div class="sidebyside">div1</div>
    <div class="sidebyside">div2</div>
    <div class="sidebyside">div3</div>
    <div class="sidebyside">div4</div>
</div>
<div class="belowdiv">div5</div>
<div class="belowdiv">div6</div>
<div class="belowdiv">div7</div>
<div class="belowdiv">div8</div>
<div class="belowdiv">div9</div>