Aligning two images in CSS

I am trying to align two images horizontally using CSS. In CSS, I have:

#poster1 {
background开发者_运维技巧-image: url(audioMaster1.png);
background-repeat: no-repeat;
background-position: 0px 40px;
padding-top:595px;
}
#poster2 {
background-image: url(audioMaster2.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-top:595px;
}

and in HTML, I have at the moment:

<div id="poster1"></div>
<div id="poster2"></div>

but, obviously, the images are below each other, which I do not want. I would like the images to be side by side.

Give the div elements an explicit width; otherwise they will expand to fill all available horizontal width.

You will then need to float them or use inline-block.

jsFiddle.

You need to add some things, try this:

#poster1 {
background-image: url(audioMaster1.png);
background-repeat: no-repeat;
background-position: 0px 40px;
padding-top:595px;
float:left;
}
#poster2 {
background-image: url(audioMaster1.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-top:595px;
float:left;
}
#wrapper{}

Notice the floats. You can also add width to specify how wide you want it.

It is also common to add a wrapper too.

<div id="wrapper">
    <div id="poster1">aa</div>
    <div id="poster2">bb</div
</div>

Ok try this:

CSS: #image1, #image2 {float:left; display:inline-block; background:#000; width:250px; height:250px; margin:5px;}

<div id="wrapper">
<div id="image1"><img src="1" /></div>
<div id="image2"><img src="2" /></div>
</div>

You should find you have two black boxes side by side, simply replace the background:#000 with your image URL so for instance it would be : background:url("audioMaster1.png") no-repeat 0px 40px;

You can then use the "Wrapper" to move both images around together. :)

That should do the job.