How to position divs Next To Each Other

[Justin Rollin]

Hi there,

My goal is to have a div background image be the border of two product photos rather than having the borders added to the photos. First off, sorry for my lack of experience with css and basic questions:)

The reference link is here: http://www.productscoop.com/weber-go-anywhere-gas-grill/

If you scroll down to the two gas grill product photos you will see that there is too much space between the DIVs. There should be just 10 or so pixels between the two product photos.

The question is: How can I lessen the space between the two DIVs? Thanks for your help!

Here's the code for the two images:

<div class="bottomproductleft"><img class="aligncenterphoto" src="/images/go-anywhere-grill.jpg" alt="Picture of best go anywhere grill review." width="284" height="284" /></div>
<div class="bottomproductright"><img class="aligncenterphoto" src="/images/weber-go-anywhere.jpg" alt="Picture of weber go anywhere." width="284" height="284" /></div>

Here's the css code that controls the images attributes:

 
 
.bottomproductleft {
    float:left;
    margin-bottom: 15px;
        background-image:url('bottomphotobg.png');
        background-repeat:no-repeat;
 
}
 
.bottomproductright {
    float:right;
        margin-bottom: 15px;
        background-image:url('bottomphotobg.png');
        background-repeat:no-repeat;     
 
}
 
.post img.aligncenterphoto {
    margin: 8px 8px 8px 8px; 
}
 
 

[JKing]

Float them both to the left.