Align <div> elements side by side

Question

I know this is a pretty simple question, but I can't figure it out for me. I have two links to which I applied the background image. Here's what it looks like now (apologies for the shadow, just an approximate thumbnail of the button):

However, I want these two buttons to be side by side. I can't figure out what needs to be done with alignment.

Here is the HTML

<div id="dB"}> <a href="http://notareallink.com" title="Download" id="buyButton">Download</a> </div> <div id="gB"> <a href="#" title="Gallery" onclick="$j('#galleryDiv').toggle('slow');return false;" id="galleryButton">Gallery</a> </div> 

Here is CSS

 #buyButton { background: url("assets/buy.png") 0 0 no-repeat; display:block; height:80px; width:232px; text-indent:-9999px; } #buyButton:hover{ width: 232px; height: 80px; background-position: -232px 0; } #buyButton:active { width: 232px; height: 80px; background-position: -464px 0; } #galleryButton { background: url("images/galleryButton.png") 0 0 no-repeat; display:block; height:80px; width:230px; text-indent:-9999px; } #galleryButton:hover{ width: 230px; height: 80px; background-position: -230px 0; } #galleryButton:active { width: 230px; height: 80px; background-position: -460px 0; } 

Answer 1

Apply float:left; to both of your divs so they stand side by side.

Answer 2

Using a float solution, I have an unintended impact on other elements. (Hint: you may need to use clearfix .)

To avoid affecting other elements of your page, use display: inline-block for each section ...

 <div style="display: inline-block">Button 1</div> <div style="display: inline-block">Button 2</div> 

Given your needs, display: flex may also be a desirable solution.

Answer 3

keep it simple

 <div align="center"> <div style="display: inline-block"> <img src="img1.png"> </div> <div style="display: inline-block"> <img src="img2.png"> </div> </div>