CSS Forum

**silverglade** · 12:15 PM

hi, i have this unwanted space that varies between firefox and IE6 to the right of my center content on my page. i have no idea how to get rid of it, i tried resizing the div widths but it remains. i also set heights on the divs to line them up at the bottom of the page. any help greatly appreciated. thank you. derek

here is the page im talking about.

http://derekvanderven.com/computer_ecommerce/index.html

here is the css for the site and the page

Code:

@charset "utf-8";
/* CSS Document */

body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #71838A;
}
#wrapper {
overflow: auto;
margin: 0 auto 0 auto;
width: 750px;
background-color: #B0BBBF;
}
#header {
margin: 0 auto 0 auto;
background-image: url(slice_front_images/header.jpg); 
background-repeat: no-repeat;
width: 750px;
height: 81px;
}
#left_nav_container{
float: left;
margin: 0 auto 0 21px;
width: 175px;
border: 1px solid #999999;
background-color: #C0C0C0;
padding-top: 20px;
}
 
/**********************************left links code************************/
#left_links {
width: 175px;
height: 700px;
margin: 0 auto 0 auto;
border-right: 1px solid #618EFD/*#6792FD*/;
    border-left: 1px solid #618EFD/*#6792FD*/;
}

#left_links ul li a:link, #left_links ul li a:visited {
font-weight:bold;
color:#375B97;
text-decoration:none;
font-size:84%;
display:block;
height:1.8em;
}
#left_links ul li a:hover, #left_links ul li a:active{
color: #000;
text-decoration:none;
}
#left_links ul li {
position:relative;
left:-20px; 
list-style-type:none;
}
/*************************************end left links*********************/

#header_image {
    float: left;
    width: 380px;
    height: 188px;
    background-image: url(images/header_image.jpg);
    background-repeat: no-repeat;
    border: 2px solid gray;
}
/*****************************front sales*******************************/
#front_sales_container {
    float: left;
    width: 380px;
    height: 545px;
    border: 2px solid gray;
    background-color: white;
}

.front_sales_divs {
    float: left;
    width: 130px;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: 27px;
    border: 1px solid gray;
    padding-bottom: 5px;
}

 
.front_sales_divs img {
float: right;
padding-top: 5px;
padding-right: 5px;
 
}
.front_sales_text {
float: left;
width: 130px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding: bottom: 5px;
font-size:70%;
line-height: 90%;
     

}
  
  
 
   /*******************************footer************************/
 #footer {
margin: 0 auto 0 auto;
width: 750px;
color: white;
background-color: gray;
text-align: center;
}

 #footer a:link , #footer a:visited  {
text-decoration: none;
color: white;
}
#footer a:active, #footer a:hover {
text-decoration: none;
color: blue;
}

/************************************right content****************************/
#right_container{
    float:right;
    width: 180px;
    border: 1px solid #999999;
    background-color: #fff;
    padding-top: 20px;
    padding-right: 0px;
    font-size: small;
    padding-left: 10px;
    margin-left: 0px;
    font-size: 70%;
    line-height: 90%;
    height: 720px;
    margin-top: 0px;
    margin-right: 4px;
    margin-bottom: 0px;
}




.right_content {
    width: 160px;
    border: 1px solid #999999;
    margin-top: 20px;
    margin-right: 5px;
    margin-bottom: 0;
    padding-top: 10px;
    line-height: 105%;
    padding-left: 0px;
}

.right_content img {
float: left;
padding-right: 10px;
}
/*************************************top links*****************************/

#toplinks {
    font-weight:bold;
    width:530px;
    height: 25px;
    float:right;
    margin-top: 55px;
    margin-right: 20px;
    margin-bottom: 0;
    margin-left: 0;
    text-align: right;
}
#toplinks ul {
list-style-type:none;
margin:0;
padding:0;
font-size: 70%;
}
#toplinks ul li {
display:inline;
margin:0 3px;
line-height:1.5em;
}
#toplinks ul li a:link, #toplinks ul li a:visited {
color:#fff;
text-decoration:none;
height:1.8em;
}
#toplinks ul li a:hover, #toplinks ul li a:active{
color:#59B942;
text-decoration:none;
}
/***************************computers code**************************/

#computers_content {
margin: 0 auto 0 auto;
width: 350px;

border: 1px solid #999999;
 

}
#computers_content p {
padding: 20px ;
}
#computers_content img {
float: right;
padding: 20px;
border: 2px solid gray;
}

#computers_content h4 {
font-size: large;
padding: 10px;
}

#checkout { 
float: left;
width: 100px;
}
#checkout img {
padding: 20px; 
}

/********************************JOHNNY'S LEFT NAV***************************/

.navlist { /*needs images/borders on sides*/
    /*background: url('images/nav.png') repeat-x 0 -70px;*/
    width: 120px;
    list-style: none;
    padding: 10px 10px 0 0;
    margin: 0 0 0 4px;
    float: left;
    border-right: 1px solid #618EFD/*#6792FD*/;
    border-left: 1px solid #618EFD/*#6792FD*/;
}

.navlist li
{
    display: block;
    margin: 0;
    padding: 0;
}

.navlist li a
{
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 6px 9px 4px;
    border-top: #618EFD solid 1px;
    color: #000;
    text-decoration: none;
    text-align: center;
}

.navlist a:hover
{
    color: #fff;
    background: #618EFD;
}

.navlist h3 {
    width: 100%;
    padding: 8px 4px 8px 4px;
    margin: 0;
    text-align: center;
    background: #fff;
}
/*******************************cart container*********************/

#cart_container {
    float: left;
    width: 375px;
    border: 2px solid gray;
    background-color: white;
    height: 545px;
}

#header_image_cart {
    float: left;
    width: 375px;
    height: 188px;
    background-image: url(images/header_image.jpg);
    background-repeat: no-repeat;
    border: 2px solid gray;
}

and here is the html for the page

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<link href="computer.css" rel="stylesheet" type="text/css"/>
<title>Computer Ecommerce home</title>
<style type="text/css">
 
.style2 {
    color: #CC6600;
    font-weight: bold;
}
.style3 {
    color: #00CC33;
    font-weight: bold;
}
</style>
</head>

<body>


<div id="wrapper">
    <div id="header"><div id="toplinks">
      <ul>
<li><a href="index.html">Home</a></li>
<li><a href="computers.html">| Computers</a></li><li><a href="notebooks.html">| Notebooks </a></li>
<li><a href="pda.html">| PDA</a></li>
<li><a href="cart.html">| Your Cart</a></li>
<li><a href="support.html">| Support</a></li>
</ul>
    </div><!--end toplinks-->
    
    
  </div><!--end header-->
     
    
     
 <ul class="navlist">
             
            <li><h3>Our Products</h3></li>
            <li><a href="motherboards.html">Motherboards</a></li>
            <li><a href="processors.html">Processors</a></li>
            <li><a href="memory.html">Memory</a></li>
            <li><a href="hard_drives.html">Hard Drives</a></li>
            <li><a href="monitors.html">Monitors</a></li>
            <li><a href="case.html">Case</a></li>
            <li><a href="ups.html">UPS</a></li>
            <li><a href="video_cards.html">Video Cards</a></li>
            <li><a href="cd.html">CD/CDR</a></li>
            <li><a href="data.html">Data Storage</a></li>
            <li><a href="devices.html">I/O Devices</a></li>
            <li><a href="multimedia.html">Multimedia</a></li>
            <li><a href="removable.html">Removable Storage</a></li>
            <li><a href="scanners.html">Scanners &amp; Printers</a></li>
            <li><a href="hubs.html">Hubs and Routers</a></li>
             <li><a href="speakers.html">Speakers</a></li>
            <li><a href="scanners.html">Scanners</a></li>
            <li><a href="hubs.html">Hubs and Routers</a></li>
        </ul>
        <!--end of left nav-->
          
          <div id="header_image"></div><!--end header image-->
          
          <div id="right_container">
            <p><img src="slice_front_images/intel_image.jpg" width="173" height="86" /></p>
            <p>&nbsp;</p>
            <p><span class="style1"><span class="style2"> 15% discount</span>, <a href="discount.html">click here</a></span></p>
            <p>0 items in your :</p>
            <p align="center"><a href="cart.html">Shopping Cart</a></p>
           
           
            <div class="right_content"><img src="slice_front_images/learning_center_hands.jpg"/><span class="style3">Learning Center</span><br />
            <br />
            <br />
            <a href="learning.html">start learning!<br />
            <br />
            </a></div>
            <!--end right content-->
            
            
            <div class="right_content">
              <p><img src="slice_front_images/warrantees_smile.jpg" width="64" height="68" /> <span class="style3">Warrantees</span><br />
               </p>
              <p><a href="warantees.html">Check out our warantees!</a>                </p>
            </div><!--end right content-->
         
          <div class="right_content">
              
              <p align="center"><a href="customer_service.html">Customer Service Home</a>                <br />
              </p>
              <p align="center"><a href="account_info.html">Account Info</a></p>
              <p align="center"><a href="downloads.html">Downloads</a></p>
              <p align="center"><a href="registration.html">Product Registration</a></p>
              <p align="center">&nbsp;</p>
          </div><!--end right content-->
         
         
         
          </div><!--end right container-->
          
<div id="front_sales_container">
          
          <div class="front_sales_divs"> 
          <img src="slice_front_images/computer.jpg" width="59" height="62"/> 
          
          <div class= "front_sales_text">
            <strong>Dell Computer</strong> &nbsp;&nbsp;&nbsp;&nbsp;<strong>&nbsp;$999             </strong>   <br />
            <br />
            Maybe better to build<br />
            your own.<br />
            </div><!--end front sales text-->
          
          </div><!--end front sales divs-->
          
          <div class="front_sales_divs"> <img src="slice_front_images/headphones.jpg" height=           "56" />
            
            <div class= "front_sales_text">
            <strong>Cool Headphones</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
            <br />
            &nbsp;$99              </strong>   <br />
            <br />
            Quality headphones!!!<br />
            </div><!--end front sales text--></div>
         
          <div class="front_sales_divs"><img src="slice_front_images/video_card.jpg" height=         "54"/> 
            
            <div class= "front_sales_text">
               <strong>Nvidea video card </strong>&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
              <br />
&nbsp;$299 <br />
<br />
              </strong> Hottest fastest card!!</div>
            <!--end front sales text--></div>
          
          <div class="front_sales_divs"><img src="slice_front_images/monitor.jpg" height="59" /           > 
            <div class= "front_sales_text">
               <strong>Awesome Monitor </strong>&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
              <br />
&nbsp;$1299<br />
<br />
            </strong> Incredible monitor!!!</div>
            <!--end front sales text--></div>
          
          <div class="front_sales_divs"><img src="slice_front_images/dvd_rw.jpg" width="55"          height="61"  /> 
            <div class= "front_sales_text">
               <strong>Uber DVD drive!!! </strong>&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
              <br />
&nbsp;$125.99<br />
               <br />
               </strong>This one is amazing!</div>
            <!--end front sales text--></div>
           <div class="front_sales_divs">
           
           <img src="slice_front_images/Seagate_Hard_Disk.jpg"width="74" height="62"   />
          
           <div class= "front_sales_text">
               <strong>Ultimate uber drive!</strong>&nbsp;&nbsp;&nbsp;<strong><br />
              <br />
&nbsp;$9999999,99999.00<br />
               <br />
            </strong>This one is the best!</div>
           </div>
          
          </div>
          <!--end front sales container-->
          
          
        
          

</div><!--end wrapper-->
<div id="footer">&copy; site design by<a href="http://derekvanderven.com"> derekvanderven.com </a></div>
<!--end footer-->
<!-- Start of StatCounter Code -->
<script type="text/javascript">
sc_project=3569481; 
sc_invisible=1; 
sc_partition=39; 
sc_security="7e526e75"; 
</script>

<script type="text/javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><div class="statcounter"><a title="free hit counter" href="http://www.statcounter.com/free_hit_counter.html" target="_blank"><img class="statcounter" src="http://c40.statcounter.com/3569481/0/7e526e75/1/" alt="free hit counter" ></a></div></noscript>
<!-- End of StatCounter Code -->
</body>
</html>

**DigitalStax** · 06-11-2009, 08:16 PM

You have a float:right on the right column. Change it to float:left and work from there to get it positioned as you want.

**silverglade** · 01:31 PM

now my only problem is i have scrollbars in internet explorer 6. any advice appreciated if you can. i get horizontal and vertical scrollbars. here is the page as it looks now.

http://derekvanderven.com/computer_ecommerce/index.html

here is the new css

Code:

@charset "utf-8";
/* CSS Document */
 
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #71838A;
}
#wrapper {
overflow: auto;
margin: 0 auto 0 auto;
width: 750px;
background-color: #B0BBBF;
}
#header {
margin: 0 auto 0 auto;
background-image: url(slice_front_images/header.jpg);
background-repeat: no-repeat;
width: 750px;
height: 81px;
}
#left_nav_container{
float: left;
margin: 0 auto 0 21px;
width: 175px;
border: 1px solid #999999;
background-color: #C0C0C0;
padding-top: 20px;
}
 
/**********************************left links code************************/
#left_links {
width: 175px;
height: 700px;
margin: 0 auto 0 auto;
border-right: 1px solid #618EFD/*#6792FD*/;
    border-left: 1px solid #618EFD/*#6792FD*/;
}
 
#left_links ul li a:link, #left_links ul li a:visited {
font-weight:bold;
color:#375B97;
text-decoration:none;
font-size:84%;
display:block;
height:1.8em;
}
#left_links ul li a:hover, #left_links ul li a:active{
color: #000;
text-decoration:none;
}
#left_links ul li {
position:relative;
left:-20px;
list-style-type:none;
}
/*************************************end left links*********************/
 
#header_image {
    float: left;
    width: 380px;
    height: 188px;
    background-image: url(images/header_image.jpg);
    background-repeat: no-repeat;
    border: 2px solid gray;
}
/*****************************front sales*******************************/
#front_sales_container {
    float: left;
    width: 380px;
    height: 545px;
    border: 2px solid gray;
    background-color: white;
}
 
.front_sales_divs {
    float: left;
    width: 130px;
    margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: 27px;
    border: 1px solid gray;
    padding-bottom: 5px;
}
 
 
.front_sales_divs img {
float: right;
padding-top: 5px;
padding-right: 5px;
 
}
.front_sales_text {
float: left;
width: 130px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding: bottom: 5px;
font-size:70%;
line-height: 90%;
    
 
}
 
 
 
   /*******************************footer************************/
 #footer {
margin: 0 auto 0 auto;
width: 750px;
color: white;
background-color: gray;
text-align: center;
}
 
 #footer a:link , #footer a:visited  {
text-decoration: none;
color: white;
}
#footer a:active, #footer a:hover {
text-decoration: none;
color: blue;
}
 
/************************************right content****************************/
#right_container{
    float: right;
    clear: right;
    width: 210px;
    border: 1px solid #999999;
    background-color: #fff;
    padding-top: 20px;
    padding-right: 0px;
    font-size: small;
    padding-left: 10px;
    margin-left: 0px;
    font-size: 70%;
    line-height: 90%;
    height: 720px;
    margin-top: 0px;
    margin-right: 4px;
    margin-bottom: 0px;
}
 
 
 
 
.right_content {
    width: 160px;
    border: 1px solid #999999;
    margin-top: 20px;
    margin-right: 5px;
    margin-bottom: 0;
    padding-top: 10px;
    line-height: 105%;
    padding-left: 0px;
}
 
.right_content img {
float: left;
padding-right: 10px;
}
/*************************************top links*****************************/
 
#toplinks {
    font-weight:bold;
    width:530px;
    height: 25px;
    float:right;
    margin-top: 55px;
    margin-right: 20px;
    margin-bottom: 0;
    margin-left: 0;
    text-align: right;
}
#toplinks ul {
list-style-type:none;
margin:0;
padding:0;
font-size: 70%;
}
#toplinks ul li {
display:inline;
margin:0 3px;
line-height:1.5em;
}
#toplinks ul li a:link, #toplinks ul li a:visited {
color:#fff;
text-decoration:none;
height:1.8em;
}
#toplinks ul li a:hover, #toplinks ul li a:active{
color:#59B942;
text-decoration:none;
}
/***************************computers code**************************/
 
#computers_content {
margin: 0 auto 0 auto;
width: 350px;
 
border: 1px solid #999999;
 
 
}
#computers_content p {
padding: 20px ;
}
#computers_content img {
float: right;
padding: 20px;
border: 2px solid gray;
}
 
#computers_content h4 {
font-size: large;
padding: 10px;
}
 
#checkout {
float: left;
width: 100px;
}
#checkout img {
padding: 20px;
}
 
/********************************JOHNNY'S LEFT NAV***************************/
 
.navlist { /*needs images/borders on sides*/
    /*background: url('images/nav.png') repeat-x 0 -70px;*/
    width: 120px;
    list-style: none;
    padding: 10px 10px 0 0;
    margin: 0 0 0 4px;
    float: left;
        clear: left;
    border-right: 1px solid #618EFD/*#6792FD*/;
    border-left: 1px solid #618EFD/*#6792FD*/;
}
 
.navlist li
{
    display: block;
    margin: 0;
    padding: 0;
}
 
.navlist li a
{
    display: block;
    width: 100%;
    margin: 0;
    padding: 4px 6px 9px 4px;
    border-top: #618EFD solid 1px;
    color: #000;
    text-decoration: none;
    text-align: center;
}
 
.navlist a:hover
{
    color: #fff;
    background: #618EFD;
}
 
.navlist h3 {
    width: 100%;
    padding: 8px 4px 8px 4px;
    margin: 0;
    text-align: center;
    background: #fff;
}
/*******************************cart container*********************/
 
#cart_container {
    float: left;
    width: 340px;
    border: 2px solid gray;
    background-color: white;
    height: 545px;
}
 
#header_image_cart {
    float: left;
    width: 385;
    height: 188px;
    background-image: url(images/header_image.jpg);
    background-repeat: no-repeat;
    border: 2px solid gray;
}

and here is the new html

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<link href="computer_test.css" rel="stylesheet" type="text/css"/>
<title>Computer Ecommerce home</title>
<style type="text/css">
 
.style2 {
    color: #CC6600;
    font-weight: bold;
}
.style3 {
    color: #00CC33;
    font-weight: bold;
}
</style>
</head>

<body>


<div id="wrapper">
    <div id="header"><div id="toplinks">
      <ul>
<li><a href="index.html">Home</a></li>
<li><a href="computers.html">| Computers</a></li><li><a href="notebooks.html">| Notebooks </a></li>
<li><a href="pda.html">| PDA</a></li>
<li><a href="cart.html">| Your Cart</a></li>
<li><a href="support.html">| Support</a></li>
</ul>
    </div><!--end toplinks-->
    
    
  </div><!--end header-->
     
    
     
 <ul class="navlist">
             
            <li><h3>Our Products</h3></li>
            <li><a href="motherboards.html">Motherboards</a></li>
            <li><a href="processors.html">Processors</a></li>
            <li><a href="memory.html">Memory</a></li>
            <li><a href="hard_drives.html">Hard Drives</a></li>
            <li><a href="monitors.html">Monitors</a></li>
            <li><a href="case.html">Case</a></li>
            <li><a href="ups.html">UPS</a></li>
            <li><a href="video_cards.html">Video Cards</a></li>
            <li><a href="cd.html">CD/CDR</a></li>
            <li><a href="data.html">Data Storage</a></li>
            <li><a href="devices.html">I/O Devices</a></li>
            <li><a href="multimedia.html">Multimedia</a></li>
            <li><a href="removable.html">Removable Storage</a></li>
            <li><a href="scanners.html">Scanners &amp; Printers</a></li>
            <li><a href="hubs.html">Hubs and Routers</a></li>
             <li><a href="speakers.html">Speakers</a></li>
            <li><a href="scanners.html">Scanners</a></li>
            <li><a href="hubs.html">Hubs and Routers</a></li>
        </ul>
        <!--end of left nav-->
          
          <div id="header_image"></div><!--end header image-->
          
          <div id="right_container">
            <p><img src="slice_front_images/intel_image.jpg" width="173" height="86" /></p>
            <p>&nbsp;</p>
            <p><span class="style1"><span class="style2"> 15% discount</span>, <a href="discount.html">click here</a></span></p>
            <p>0 items in your :</p>
            <p align="center"><a href="cart.html">Shopping Cart</a></p>
           
           
            <div class="right_content"><img src="slice_front_images/learning_center_hands.jpg"/><span class="style3">Learning Center</span><br />
            <br />
            <br />
            <a href="learning.html">start learning!<br />
            <br />
            </a></div>
            <!--end right content-->
            
            
            <div class="right_content">
              <p><img src="slice_front_images/warrantees_smile.jpg" width="64" height="68" /> <span class="style3">Warrantees</span><br />
               </p>
              <p><a href="warantees.html">Check out our warantees!</a>                </p>
            </div><!--end right content-->
         
          <div class="right_content">
              
              <p align="center"><a href="customer_service.html">Customer Service Home</a>                <br />
              </p>
              <p align="center"><a href="account_info.html">Account Info</a></p>
              <p align="center"><a href="downloads.html">Downloads</a></p>
              <p align="center"><a href="registration.html">Product Registration</a></p>
              <p align="center">&nbsp;</p>
          </div><!--end right content-->
         
         
         
          </div>
          
          <div id="front_sales_container">
          
          <div class="front_sales_divs"> 
          <img src="slice_front_images/computer.jpg" width="59" height="62"/> 
          
          <div class= "front_sales_text">
            <strong>Dell Computer</strong> &nbsp;&nbsp;&nbsp;&nbsp;<strong>&nbsp;$999             </strong>   <br />
            <br />
            Maybe better to build<br />
            your own.<br />
            </div><!--end front sales text-->
          
          </div><!--end front sales divs-->
          
          <div class="front_sales_divs"> <img src="slice_front_images/headphones.jpg" height=           "56" />
            
            <div class= "front_sales_text">
            <strong>Cool Headphones</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
            <br />
            &nbsp;$99              </strong>   <br />
            <br />
            Quality headphones!!!<br />
            </div><!--end front sales text--></div>
         
          <div class="front_sales_divs"><img src="slice_front_images/video_card.jpg" height=         "54"/> 
            
            <div class= "front_sales_text">
               <strong>Nvidea video card </strong>&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
              <br />
&nbsp;$299 <br />
<br />
              </strong> Hottest fastest card!!</div>
            <!--end front sales text--></div>
          
          <div class="front_sales_divs"><img src="slice_front_images/monitor.jpg" height="59" /           > 
            <div class= "front_sales_text">
               <strong>Awesome Monitor </strong>&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
              <br />
&nbsp;$1299<br />
<br />
            </strong> Incredible monitor!!!</div>
            <!--end front sales text--></div>
          
          <div class="front_sales_divs"><img src="slice_front_images/dvd_rw.jpg" width="55"          height="61"  /> 
            <div class= "front_sales_text">
               <strong>Uber DVD drive!!! </strong>&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
              <br />
&nbsp;$125.99<br />
               <br />
               </strong>This one is amazing!</div>
            <!--end front sales text--></div>
           <div class="front_sales_divs">
           
           <img src="slice_front_images/Seagate_Hard_Disk.jpg"width="74" height="62"   />
          
           <div class= "front_sales_text">
               <strong>Ultimate uber drive!</strong>&nbsp;&nbsp;&nbsp;<strong><br />
              <br />
&nbsp;$9999999,99999.00<br />
               <br />
            </strong>This one is the best!</div>
           </div>
          
          </div>
          
          <!--end right container-->
          

          <!--end front sales container-->
          
          
        
          

</div><!--end wrapper-->
<div id="footer">&copy; site design by<a href="http://derekvanderven.com"> derekvanderven.com </a></div>
<!--end footer-->
<!-- Start of StatCounter Code -->
<script type="text/javascript">
sc_project=3569481; 
sc_invisible=1; 
sc_partition=39; 
sc_security="7e526e75"; 
</script>

<script type="text/javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><div class="statcounter"><a title="free hit counter" href="http://www.statcounter.com/free_hit_counter.html" target="_blank"><img class="statcounter" src="http://c40.statcounter.com/3569481/0/7e526e75/1/" alt="free hit counter" ></a></div></noscript>
<!-- End of StatCounter Code -->
</body>
</html>

**silverglade** · 06-12-2009, 01:51 PM

i got lazy. i added this code to the wrapper.

overflow-x: hidden;
overflow-y: hidden;
and scrolls went away.

**LadynRed** · 06-12-2009, 01:55 PM

You have scrollbars because your dimensions are all off. You need to get a better grip on the CSS box model: http://css-tricks.com/the-css-box-model/

Horizontally your columns are too wide so you get the horizontal scroll. Vertical scrolling is due to the set height you've given it.