Putting some Images in a line.

Question

Here's a picture of my current situation : But I don't want the images below each other, I want them in a line, a straight horizontal line. This is the code I have currently:

<span title="Milestones" class="tl-icon">
<span class="tl-msg">
<span class="tl-msg-inside">
<div class="slice1"></div>
<div class="slice2"></div>
<div class="slice3"></div>
<div class="slice4"></div>
<div class="slice5"></div>
<div class="slice6"></div>
<div class="slice7"></div>
<div class="slice8"></div>
<div class="slice9"></div>
<div class="slice10"></div>
<div class="slice11"></div>
</span>

So how would I make all the images be in a straight line?

Answer 1

You should set the class for all the divs to the same class, something like slices, and then go with:

 .slices {
     display: inline; 
 }

Answer 2

Try floating the images to the left. For example:

.image {
    float: left;
}

Answer 3

DIVs are block level elements and will cause each slice to be on it's own line. You can either change the display property of those divs to be inline, or use SPANs instead.

Answer 4

There's solutions to your problem, and then there's solutions to your problem.

The immediate fixup is to make the divs display:inline or float:left. Divs are naturally block which means each one will fill the entire width of their container, so they stack below each other. Inline makes them act like text and shrink to the size of their content, and sit next to each other. Floating works more-or-less similarly.

The better fixup is to avoid those divs altogether. Can you just use <img>? That's usually ideal.