CODEWITHSUNDEEP
htmlcss
Karina
Karina

Reputation: 663

Align images horizontally CSS

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

Upvotes: 9

Views: 75279

Answers (5)

zazvorniki
zazvorniki

Reputation: 3602

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

Upvotes: 2

Patsy Issa
Patsy Issa

Reputation: 11293

Display the divs as inline-block like so :

#christmas_promotion_boxes div {
  display: inline-block;
}

Fiddle

Upvotes: 14

Gianfranco P
Gianfranco P

Reputation: 10794

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.

Upvotes: 1

Joel Worsham
Joel Worsham

Reputation: 1150

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/

Upvotes: 2

Munkhtsol Batchuluun
Munkhtsol Batchuluun

Reputation: 23

add this

#christmas_promotion_boxes div{
float: left;

}

Upvotes: 0

Related Questions