image box horizontally alignment

Question

how to make the red box horizontally aligned i gave display inline property to the imageBox class but its not working

providing my code below

<div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>
            <div class="imageBox"></div>

http://jsfiddle.net/VXXPC/7/

Answer 1

I believe the display:inline; function is only for list items.

The best solution to make them display in a line, is to wrap them in a div, then give every box div a float:left;

HTML:

<div id="ImageBox_wrapper> 
   <div class="ImageBox></div>
   <div class="ImageBox></div>
   <div class="ImageBox></div>
   <div class="ImageBox></div>
   <div class="ImageBox></div>
   <div class="ImageBox></div>
</div>

CSS:

.ImageBox {
border:1px solid red;
width: 30px;
height: 30px;
float: left;

If that doesn't work you can try adding a position:relative; to your .ImageBox css

position:relative;

Answer 2

.imageBox {display: inline-block;}

http://jsfiddle.net/VXXPC/13/