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.