How can I align HTML divs in a row like structure?

Question

I am trying to align some divs in a horizontal row structure. There is a div container which has child divs, and these child divs should be in the same row. There can be many container divs like these, having different ids but the same class name.

How can I do that? Here is the jsFiddle I attempted: http://jsfiddle.net/unix_user/VSd6Y/6/ .

Answer 1

Use display:inline-block . This way your div will stack up next to each other and you are able to specify widths and other attributes common to block elements.

Check out the updated fiddle . You can see that the div s styled with container are on separate lines, but the child div s are stacked next to each other.

Answer 2

Think of this as a UL LI structure. You can either float:left; the elements or display:inline-block; for new browsers.

Answer 3

I'd recommend doing something with a .class like:

.repeating{width:400px; height:100px;margin:0px;padding:0px;}    
.repeatMe{width:90px; height:100px; padding:0px 5px; float:left;}



<div id="repeating">
<div class="repeatMe"><img src="imghere.gif" /></div>
<div class="repeatMe"><img src="imghere.gif" /></div>
<div class="repeatMe"><img src="imghere.gif" /></div>
<div class="repeatMe"><img src="imghere.gif" /></div>
</div>