I'm having some issues with a site that I am mocking up for someone. She has created the design, and I am just making it functional. I seem to be having some sort of problems with overflow. I am getting a horizontal scroll bar, and have tried a few things to keep it from happening. Of course, it doesn't seem to be working in IE. I know the site does not look right in older versions of IE, also. I'm wondering if I just need a few conditional IE statements. Is there anyone who can shed some light on this issue for me?

Here is the css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
margin:0;
padding:0;
}

:focus {
outline:0;
}

body {
line-height:1;
color:#000;
background:#FFF;
}

ol,ul {
list-style:none;
}

table {
border-collapse:separate;
border-spacing:0;
}

caption,th,td {
text-align:left;
font-weight:400;
}

blockquote:before,blockquote:after,q:before,q:after {
content:"";
}

blockquote,q {
quotes:"" "";
}

html,body {
background-color:#FFF;
text-align:center;
padding:0;
width:100%;
overflow:auto;
}

a img {
border:0;
}

#wrapper {
width:900px;
padding-bottom:5px;
text-align:center;
margin:0 auto;
}

#logo {
width:350px;
height:72px;
text-align:center;
float:left;
background-color:#89b9c7;
margin:0;
padding:0;
}

#links {
width:550px;
min-width:550px;
height:72px;
float:left;
background-color:#89b9c7;
margin:0;
padding:0;
}

#mainlinks {
width:750px;
margin-top:20px;
text-align:left;
font-size:15px;
font-family:Trebuchet MS;
padding:0;
}

#mainlinks a {
float:left;
display:block;
color:#312106;
text-decoration:none;
letter-spacing:1px;
padding:0 10px;
}

#sublinks {

height:30px;
margin-left:10px;
text-align:left;
font-size:15px;
font-family:Trebuchet MS;
padding:0;
position: absolute;
visibility: hidden;
}

#sublinks a {
top:20px;
display:block;
color:#830107;
text-decoration:none;
letter-spacing:1px;
background-color:#adced8;
border-right:solid 1px #c6dce3;
padding:0 10px;
position: relative;
display: block;
}

#wrapperinside {
width:896px;
min-height:486px;
background-color:#dbeaee;
border-left:2px solid #dbeaee;
border-right:2px solid #dbeaee;
text-align:center;
float:left;
padding-left:0;
padding-right:0;
margin:0 auto;
}

#bottomnav {
width:900px;
height:24px;
background-color:#89b9c7;
clear:both;
}

#bottomnavlinks {
width:900px;
height:24px;
text-align:center;
font:11px Trebuchet MS;
color:#312106;
margin:0;
padding:0;
}

#bottomnavlinks ul {
position:relative;
float:left;
line-height:24px;
left:50%;
list-style:none;
margin:0;
padding:0;
}

#bottomnavlinks li {
position:relative;
float:left;
right:50%;
display:inline;
text-align:center;
margin:0;
padding:0;
}

#bottomnavlinks a {
float:left;
display:block;
color:#312106;
text-decoration:none;
font-weight:700;
padding:0 10px;
}

#footer {
height:70px;
width:900px;
min-width:900px;
font-family:Helvetica;
font-size:12px;
padding-top:10px;
clear:both;
}

#left {
width:446px;
height:486px;
float:left;
text-align:left;
font:14px Helvetica;
color:#000;
margin-left:2px;
padding:5px 5px 5px 0;
}

#right {
width:440px;
height:295px;
float:right;
text-align:left;
font:14px Helvetica;
color:#000;
margin:5px 2px 0 0;
}

#text {
width:418px;
height:164px;
background-color:#FFF;
float:right;
text-align:left;
font:14px Trebuchet MS;
color:#312106;
border:1px solid #e0c9a4;
margin:5px 2px 0 0;
padding:10px;
}

#text h1 {
font:20px Trebuchet MS;
color:#312106;
text-align:center;
margin:0;
padding:0;
}

.gallery {
border:2px solid #890711;
margin:5px;
}

#leftimageall {
width:362px;
height:486px;
float:left;
text-align:left;
font:14px Helvetica;
color:#000;
padding:5px 5px 5px 0;
}

#contentall {
width:418px;
float:left;
text-align:left;
margin-left:30px;
margin-top:50px;
font:14px Trebuchet MS;
color:#312106;
}

#contentall h1 {
font:20px Trebuchet MS;
color:#312106;
text-align:left;
margin:0;
padding:0;
}

#mainlinks ul,#sublinks ul {
float:left;
list-style:none;
margin:0;
padding:0;
}

#mainlinks li,#sublinks li {
float:left;
display:inline;
text-align:center;
margin:0;
padding:0;
}

#mainlinks a:hover,#sublinks a:hover,#bottomnavlinks a:hover {
color:#FFF;
}

#mainlinks #current a,#sublinks #current a {
background-color:#103669;
}


#sddm{    
margin: 0;
padding: 0;
z-index: 30;
}

#sddm li{    
margin: 0;
padding: 0;
list-style: none;
}

#sddm div{    
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
}

#sddm div a{    
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
}

Here is the HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>    
  <title>Designers Fine Press</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
  
  <script type="text/javascript" src="js/prototype.js"></script>
  <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  <script type="text/javascript" src="js/lightbox.js"></script>
  <script type="text/javascript" src="js/nav.js"></script> 
</head>

<body>

<div id="wrapper"><!-- contains most of the code which allows for centering -->
    <div id="links"><!-- contains the link code (mainlinks and the sublinks) and keeps them on the left side of the bar -->
        <div id="mainlinks"> <!-- this is your top navigation contained in an unordered list. having it as a list gives you more control over links -->
  <ul id="sddm">
    <li><a href="gallery.php" onmouseover="mopen('sublinks')" onmouseout="mclosetime()">letterpress gallery</a></li>
    <li><a href="customize.php">customize</a></li>
    <li><a href="locator.php">store locator</a></li>
    <li><a href="about.php">about us</a></li>
    <li><a href="green.php">green</a></li>
  </ul>
</div><!-- end of main links -->

 <div id="sublinks" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"><!-- these are the sublinks that pop up when rolling over "letterpress gallery", also contained in an unordered list -->
  <ul>
    <li><a href="gallery.php">wedding</a></li>
    <li><a href="customize.php">baby</a></li>
    <li><a href="locator.php">social</a></li>
    <li><a href="about.php">holiday</a></li>
  </ul>
</div><!-- end of sub links -->
<div style="clear:both"></div>

    </div><!-- end of links -->

<div id="logo"><a href="index.php"><img src="images/logo.jpg" /></a></div><!-- this div contains your logo and keeps it on the right side of the bar -->
    
<div id="wrapperinside"><!-- this div keeps all of your inner content together. this also contains the lighter background -->
  <div id="left"><img src="images/image.jpg" /></div><!-- this contains the large leftmost image -->
  <div id="right"><img src="images/image2.jpg" /></div><!-- this contains the upper right image -->
  <div id="text"><!-- this div contains all of your text -->
      <h1>Lush letterpress you can afford to love</h1><br/>
    without scrimping on the materials you love too. Choose from
    a variety of papers including Crane’s 100% cotton Lettra paper -
    no trees - recycled cotton.  Customize with your choice of inks
    and typestyles. Our printing turnaround is 5 business days! View
    our complete collection at a shop near you.
  </div>  
  
</div> <!-- end of wrapper inside -->

<div id="bottomnav"><!-- this is the blue box surrounding the links -->

   <div id="bottomnavlinks"><!-- this is the inner div that contains the links, again in an unordered list -->
    <ul>
      <li><a href="wedding.php">wedding</a></li>
      <li><a href="baby.php">baby</a></li>
      <li><a href="social.php">social occasions</a></li>
      <li><a href="holiday.php">holiday</a></li>
      <li><a href="locator.php">where to buy</a></li>
      <li><a href="story.php">our story</a></li>
      <li><a href="contact.php">contact us</a></li>
      <li><a href="press.php">press</a></li>
      <li><a href="green.php">green</a></li>
      <li><a href="become.php">become a dealer</a></li>
      <li><a href="resources.php">dealer resources</a></li>
    </ul>
  </div><!-- end of bottomnavlinks --> 
</div><!-- end of bottomnav -->
  
<div id="footer"><!-- this is your footer -->
    50 W Techne Center Drive - Suite E | Milford, Ohio 45150 | Phone: 513-831-0523 | Fax: 513-831-0103
</div>

</div><!-- end of wrapper -->

</body>
</html>

Also, if you see anything that is generally not acceptable in my code, or a better way to do something, let me know! I've pretty much been teaching myself and I want to be sure I am doing everything right! Thanks for the help!

Try removing the "left:50%" on both #bottomnavlinks ul and #bottomnavlinks li

The "left:50%" is moving the div to the right and causing it to break out of your wrapper, making the page width larger than it should be.