How Can I Align HTML Divs In A Row Like Structure?

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 con

Solution 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 divs styled with container are on separate lines, but the child divs are stacked next to each other.

Solution 2:

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

Solution 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>