Stop row of divs dropping over to the next line within the wrapper

Stop row of divs dropping over to the next line within the wrapper

So I have a row of divs 3 infact which all float left and have equal
amounts of margin between, however when it comes to the 3rd or right hand
one if I put too much margin it forces it down to the next line naturally.
I want it to sit slush within the wrapper so there is equal amounts is
space between each one...
#mainwrapper .box {
width: 288px;
height: 245px;
border:0px solid #fff;
margin-left: 0px;
margin-right: 20px;
margin-bottom: 20px;
-moz-box-shadow: 0 0 5px #d9d9d9;
-webkit-box-shadow: 0 0 5px #d9d9d9;
box-shadow: 0 0 5px #d9d9d9;
float: left;
position: relative;
overflow: hidden;
cursor:pointer;
border: 10px solid #fff;
}
#mainwrapper .box img {
position: absolute;
left: 0;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
-ms-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
So there is the wrapper for the image and the image - the wrapper it sits
in is:
#wrapper {
width: 100%;
max-width: 980px;
margin: auto;
margin-top: 0;
margin-bottom: 60px;
}
Any ideas? Also users upload images to the list grows so it cannot be just
applied to these three images...