Question

is there any way to force div to appear on page side by side not one after one.

suppose i have main div like and it has many child div.

<div id='main'>
<div>my content 1 </div>
<div>my content 2 </div>
<div>my content 3 </div>

<div>my content 4 </div>
<div>my content 5 </div>
<div>my content 6 </div>

<div>my content 7 </div>
<div>my content 8 </div>
<div>my content 9 </div>
</div>

now i want that on each line three div will come side by side and there will be some padding….so if three div appear on each line then three line will be required to show all div content. i know css float property can be use to accquire the effect but i am not good in css. so some one help please. thanks

Answer 1

You could go the float method, or you could use display: inline-block, as per this JSFiddle:

div#main {
    width: 500px;
}

div#main div {
    width: 30%;
    display: inline-block;

    /* IE hacks */
    *display: inline;
    zoom: 1
}

div#main doesn’t have to have a width. It’s given one here just as a demonstration.