Align Images Horizontally CSS

Question

I want to align my three images horizontally instead of vertically what is the easiest way to achieve this? example

Solution 1:

Display the divs as inline-block like so :

#christmas_promotion_boxes div {
  display: inline-block;
}

Fiddle

Solution 2:

You need the div's containing the images to be floated.

Add this section of code into your css:

#christmas_promotion_boxes > *{
    float:left;
}

http://jsfiddle.net/tDfCR/5/

Solution 3:

When I have inline elements I always put them in a ul and display the li's inline. This way you don't have to worry about floating anything and it is much more scalable.

<ul>
  <li id="christmas_promo_1"><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li>
  <li id="christmas_promo_2"><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li>
  <li id="christmas_promo_3><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li>
</ul>

ul{
 width:5em
}

li{
 display:inline;
 list-style-type:none;
}

Solution 4:

Slightly different from @zazvorniki accepted answer:

<div class="christmas_promotion_boxes">
    <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/>
    <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/>
    <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/>
</div>

.christmas_promotion_boxes {
    width: 1000px;
    margin: 0 auto 0 auto;
    display: inline-block;
}

http://jsfiddle.net/tDfCR/114/

Make sure the width is larger the sum all of width of all the images.

Solution 5:

add this

#christmas_promotion_boxes div{
float: left;

}

Html5 Academy