Problems using 2 images next to each other horizontally

[Cybertronic]

I'm having problems with putting my CSS and XHTML valid images on my website, it appears like this:

This is my XHTML code:

<div class="center_bottom_column_float_rigid">
<hr/>
<a class="css" href="http://jigsaw.w3.org/css-validator/" title="Valid CSS!"></a>
<a class="xhtml" href="http://validator.w3.org/check?uri=referer" title="Valid XHTML 1.0 Transitional"></a>
</div>

and here's my CSS code:

a.css
{
background: url("vcss.png") 0 0 no-repeat;
display: block;
margin-left: 300px;
margin-right: auto;
height: 31px;
width: 88px;
}

a.xhtml
{
background: url("valid-xhtml10.png") 0 0 no-repeat;
display: block;
margin-left: 400px;
margin-right: auto;
height: 31px;
width: 88px;
}

What am I doing wrong?

 

[Cybertronic]

Oops , I've positioned the pictures by using margin-right now. I've tried the link you provided, it doesn't seem to do anything for me

I looked up the CSS properties of display and used display: inline; not display: inline-block; which it doesn't seem to exist . Using the inline statment, the image doesn't display at all . I'm new to XHTML and CSS as this is my first website

 

[Cybertronic]

I fixed it using float as suggested by xiphrex:

a.css_valid
{
background: url("vcss.png") 0 0 no-repeat;
display: inline;
float: right;
margin-right: 40px;
height: 31px;
width: 88px;
}

a.xhtml_valid
{
background: url("valid-xhtml10.png") 0 0 no-repeat;
display: inline;
float: right;
margin-right: 5px;
height: 31px;
width: 88px;
}

It's a bit of a ghetto fix really as the a.xhtml_valid margin-right is also including the margin-right from a.css_valid unless there's a better way of doing it?

It does work using <img> tags however I wanted to do it in CSS. The W3C CSS validator didn't like inline-block, using inline fixed that. It must be outdated .

Thanks for all your help!