Efficient way to align divs side by side?

Question

What is the best way to align 3, 4, or even 5 divs side by side? with the space between each of them separating them.

I tried using this on Google, but there seem to be so many different answers that seem too case-sensitive (e.g. if they are for two divs or 3 divs, etc.), I ask what is the best way to do this for any number of divs?

thanks

Answer 1

All of the answers given here are excellent and they are an effective way. But I tried to make them easier for you.

HTML:

<div id="apnd"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div> <div>Seven</div> <div>Nine</div> <div>Ten</div> <div>Eleven</div> </div> 

CSS

 #apnd div { height: 100px; width: 100px; border: 1px solid red; margin-left: 5px; float: left; /*Here you can also use display: inline-block instead of float:left*/ background: orange; } 

Answer 2

Another option: http://jsfiddle.net/brandondurham/Tht3N/

 <div id="row"> <div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div><div>One</div><div>Two</div><div>Three</div> </div> #row { white-space: nowrap; } #row > div { background: lightblue; display: inline-block; height: 50px; width: 50px; } #row > div + div { margin-left: 10px } 

Answer 3

Is there something like this:

 div.container { display:table; border-spacing:{your-space}px; } div.container > div { display:table-cell; } 

in your "many different answers"?

Today it is the most reliable way to create a horizontal row of block elements.

Until the CSC accepts http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm :)

Answer 4

Try the following:

 div { float:left margin-left:20px; //or whatever you want } div:first-child { margin-left:0; } 

Answer 5

I use this: http://plugins.jquery.com/project/equalizeCols