CSS/XHTML PROS - Quick CSS Help Needed

Hey guys, I have a small bug in my code that been throwing off my page and keeping me from implementing my new design. I'm not a professional programmer, but have been working on this site for my company and learning css as I go...

If you open the page below using Firefox, the page should show up very nicely and the content area should not have any scrollbars. However if you open the page in IE, horizontal and vertical scrollbars appear and it throws off the page completely.

http://www.socialsmoke.com/page--New-Splash--new_splash.html

Problem 1.
1. I have validated both the CSS and XHTML
2. I know it has something do to with the background images:
m_top.gif
m_main.jpg
m_bottom.gif
Because when I take them out or set them inside the div using an <img> tag instead of making them backgound-images, the scrollbars go away.

Problem 2.
If I take out the 3 images:m_top.gif, m_main.jpg, m_bottom.gif, the scrollbars go away in both IE and firefox. However If I click on any of the 5 link buttons on the right side of the page, in IE ONLY the scrollbars reappear.

Sample css:
********************************************
#containersplash {
width:951px;
height:486px;
}

#m_top {
width:720px;
height:14px;
background-image: url(/shop/media/images/newsite/layout/images/m_top.gif);
}

#m_main {
width:720px;
height:460px;
background-image: url(/shop/media/images/newsite/layout/images/m_main.jpg);
}

#m_maintext {
font-size: 26px;
color: #fff;
font-weight:bold;
text-transform: uppercase;
padding:420px 0 0 10px;
}

#m_bottom {
width:720px;
height:12px;
background-image: url(/shop/media/images/newsite/layout/images/m_bottom.gif);
}

#button_1 {
width:219px;
height:108px;
}

.button_middle {
width:219px;
height:94px;
}

#button_5 {
width:219px;
height:96px;
}

#left {
float:left;
width:12px;
height:486px;
}

#right {
width:219px;
height:486px;
float:right;
}

#middle {
width:720px;
height:486px;
float:right;
}
********************************************

Sample HTML
********************************************
<div id="containersplash">
<div id="left">
<img src="/shop/media/images/newsite/layout/images/l_bar.gif" width="12" height="486" alt="" />
</div>
<div id="right">
<div id="button_1">
<a href="http://www.socialsmoke.com/cat--Magdy-Zidan-Hookahs--magdyzidanhookahs.html">
<img src="/shop/media/images/newsite/layout/images/button_1.gif" width="219" height="108" alt="" /></a>
</div>
<div class="button_middle">
<a href="http://www.socialsmoke.com/shop/us/en/inc500.html" rel="popup console 568 600 noicon">
<img src="/shop/media/images/newsite/layout/images/button_2.gif" width="219" height="94" alt="" /></a>
</div>
<div class="button_middle">
<a href="http://www.socialsmoke.com/page--Specials--specials.html">
<img src="/shop/media/images/newsite/layout/images/button_3.gif" width="219" height="94" alt="Back to College Hookah &amp; Shisha Sale!" /></a>
</div>
<div class="button_middle">
<a href="http://www.socialsmoke.com/page--Social-Rewards--SocialRewards.html">
<img src="/shop/media/images/newsite/layout/images/button_4.gif" width="219" height="94" alt="Social Rewards Points With Every Purchase!" /></a>
</div>
<div id="button_5">
<a href="http://www.socialsmoke.com/page--Ratings-And-Reviews--RatingsReviews.html">
<img src="/shop/media/images/newsite/layout/images/button_5.gif" width="219" height="96" alt="Product Ratings &amp; Reviews" /></a>
</div>
</div>
<div id="middle">
<div id="m_top">
</div>
<div id="m_main">
<div id="m_maintext">
SIT BACK. RELAx. SOCIAL SMOKE.
</div>
</div>
<div id="m_bottom">
</div>
</div>
</div>
********************************************

 

figured it out, but not sure if this is the proper method. I set all the containers in the content area to position:relative; problem solved. If anyone knows if my solution is the correct one, please chime in, thanks