Prevent website from resizing

Prevent website from resizing

On the website I'm currently fixing there are two divs displayed Inline.
On resizing the browser window, the div on the right automatically aligns
to fit under the first div instead of staying inline. My question is on
how to prevent this resize and to keep it standard on all screen sizes.
To display this issue, I've attached two screenshots.


Another issue: The screen is vertically scrollable which should not be the
case as the height of html, body or any of the div are not more than 100%
My CSS for the two main divs is as follows:
#menu{
position:absolute;
width:15%;
height:600px;
float:left;
margin-top: 10px;
margin-left: 40px;
}
#content{
position: absolute;
height:600px;
width:73%;
float:left;
margin-top: 10px;
margin-left: 290px;
}
The CSS for the inner 4 divs are as follows
.gallery-image-rest{
background: url('../images/thumbs/rest.jpg');
position: relative;
height:600px;
width:24%;
float: left;
margin-left: 15px;
/*display: inline-block;*/
text-align: center;
}
.gallery-image-replenish{
background: url('../images/thumbs/Replenish.jpg');
position: relative;
height:600px;
width:24%;
float: left;
margin-left:3px;
/*display: inline-block;*/
text-align: center;
}
.gallery-image-rejuvenate{
background: url('../images/thumbs/Rejuvenate.jpg');
position: relative;
height:600px;
width:24%;
float: left;
margin-left:3px;
/*display: inline-block;*/
text-align: center;
}
.gallery-image-reunite{
background: url('../images/thumbs/reunite.jpg');
position: relative;
height:600px;
width:24%;
float:left;
margin-left:3px;
/*display: inline-block;*/
text-align: center;
}
The code has a lot of redundancies but that is second priority as the
client needs the display to be correct before anything else.
Thanks guys.