Question

How to align the images side by side like css sprite

 <style>
.a, .mail-green, .star{ display: block; background: url('http://css.spritegen.com//uploads/ka3dublic7f3p1363fcj1lpei1.png') no-repeat; }
.a { background-position: -0px -0px; width: 103px; height: 30px; }
.mail-green { background-position: -0px -30px; width: 159px; height: 30px; }
.star { background-position: -0px -60px; width: 198px; height: 28px; }
</style>
<div class="a"/>
<div class="main-green"/>
<div class="star"/>

Answer 1

Your HTML isn’t valid …

<div class="a"/>

should be

<div class="a"></div>

and as block elements take up a single line they won’t all appear next to each other …. you should consider using inline-block or perhaps floating the div elements and applying a width

I have created an example here using inline-block but am not really sure what your desired output is so it may be incorrect.

Here are the specs for the display property, including its valid values. And here is a good article on CSS Floats