Aligning two images in CSS - html

Question

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.

Answer 1

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.

Answer 2

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>

Answer 3

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.