need help positioning 3 image background side to side

heres a pic of what i got

http://i224.photobucket.com/albums/dd297/hellrazer21/3bg.png

and this is what im trying to do (this was from photoshop)http://i224.photobucket.com/albums/dd297/hellrazer21/dspbg.png

heres the CSS i know theres float and margins but i dont know if thats what im supposed to use to do this or how to even use it
#drywall {
background:url(images/DSP.png) no-repeat 00;

width:323px;
height:385px;
margin:5px;
margin-top:30px;
margin-left:44px;
}

#stucco {
background:url(images/DSP.png) no-repeat 00;
width:323px;
height:385px;
}
#painting {
background:url(images/DSP.png) no-repeat 00;
width:323px;
height:385px;
}

now i know its easier to just use one whole image for all three but i just want to make sure i know how to do this incase i run into something like this again:thumbsup:

and this is what im trying to do (this was from photoshop)http://i224.photobucket.com/albums/dd297/hellrazer21/dspbg.pngFor this HTML

<div id="dsp_container">
<div id="drywall"></div>
<div id="stucco"></div>
<div id="painting"></div>
</div>

You can use a CSS-based table:

#dsp_container { display: table; margin: 30px auto 0; }
#dsp_container > div { display: table-cell; width: 323px; height: 385px; background: slategray url("images/DSP.png") no-repeat; }

Or floats:

#dsp_container, #dps_container > div { height: 385px; }
#dsp_container { width: 969px; margin: 30px auto 0; }
#dsp_container > div { float: left; width: 323px; background: slategray url("images/DSP.png") no-repeat; }

now i know its easier to just use one whole image for all three but i just want to make sure i know how to do this incase i run into something like this again:thumbsup:It makes sense to repeat a single reduced image for all three elements.

If you use one large image, then the user has three times more image information to download. Plus, you can't control the spacing between the elements without creating a new image each time you want to change the spacing.