Align images horizontally CSS - html

Question

I want to align my three images horizontally instead of vertically what is the easiest way to achieve this? example
<div id="christmas_promotion_boxes">
<div id="christmas_promo_1">
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
</div>
<div id="christmas_promo_2">
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
</div>
<div id="christmas_promo_3">
<img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
</div>
</div>
#christmas_promotion_boxes {width:1000px; margin:0 auto 0 auto; text-align:center;}

Answer 1

Display the divs as inline-block like so :
#christmas_promotion_boxes div {
display: inline-block;
}
Fiddle

Answer 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/

Answer 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;
}

Answer 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.

Answer 5

add this
#christmas_promotion_boxes div{
float: left;
}