CODEWITHSUNDEEP
htmlcss
PHP
PHP

Reputation: 443

Aligning images side by side

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

Upvotes: 0

Views: 432

Answers (1)

Manse
Manse

Reputation: 38147

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

Upvotes: 3

Related Questions