Unwated Space in DIV Layout Is a Pain in the Johnson!

  • cerebralailment
  • Newbie
  • Newbie
  • cerebralailment
  • Posts: 9

Post 3+ Months Ago

Greetings,

I recently designed a website - for some reason I cannot figure out why I have a little big (like 2px) of space on the right hand side of some of the pages - its driving me friggen nuts - I hate the little things like this that make you go crazzy for a couple days before you realize how stupid you were and delete the little type-o or what not.

Here's an example of what I'm talking about:
mainejunkyards(dot)net

Here is the source:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Find Used Parts Now! Fast, easy, &amp; simple! - MaineJunkYards</title>
<META name="description" content="Find & Locate Maine Junk Yards Near You! MaineJunkYards" />
<META name="keywords" content="maine, junkyards, junk, yards, salvage, scrap, metal, cars, trucks, used, parts, auotmotive, chevy, ford, dodge, honda, acura, toyota, gmc, lexus, audi, bmw, tires, rims, shell" />
<style type="text/css">
<!--
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #000;
    background-image:url(../img/background.png);
    background-repeat:repeat-y;
    background-position: top center;
    background-color: #3ba13b;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
    color: #42413C;
    text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
}

/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
    width: 960px;
    background: #FFF;
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

/* ~~ This is the layout information. ~~

1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.

*/
.content {

    padding-left: 1px;
}
.quote { padding: 6px 4px 4px 6px; background-color:#9F6;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
    float: left;
    margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
}
-->
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<script type="text/javascript">

 var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-19201113-1']);
 _gaq.push(['_trackPageview']);

 (function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '.google-analytics/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

</script></head>

<body onload="MM_preloadImages('../img/over/images/locate.gif','../img/over/images/MNKJKYRDSlayout_03.gif','../img/over/images/MNKJKYRDSlayout_04.gif','../img/over/images/MNKJKYRDSlayout_05.gif')">

<div class="container">
 <div class="content">
         
      <div class="head"> <a href="index.html"><img src="../img/images/MNKJKYRDSlayout_01.gif" width="278" height="287" /></a><a href="locateme.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('locate','','../img/over/images/locate.gif',1)"><img src="../img/images/locate.gif" alt="Locate Maine Junk Yards" name="locate" width="167" height="287" border="0" id="locate" /></a><a href="usedparts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('usedparts','','../img/over/images/MNKJKYRDSlayout_03.gif',1)"><img src="../img/images/MNKJKYRDSlayout_03.gif" alt="Find Used Parts" name="usedparts" width="168" height="287" border="0" id="usedparts" /></a><a href="selljunkcars.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('junk cars','','../img/over/images/MNKJKYRDSlayout_04.gif',1)"><img src="../img/images/MNKJKYRDSlayout_04.gif" alt="Sell Junk Cars" name="junk cars" width="168" height="287" border="0" id="junk cars" /></a><a href="scrapmetal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('recyclemetal','','../img/over/images/MNKJKYRDSlayout_05.gif',1)"><img src="../img/images/MNKJKYRDSlayout_05.gif" alt="Recycle Metal" name="recyclemetal" width="178" height="287" border="0" id="recyclemetal" /></a></div>
    <div class="quote">
     <center>
     <b>The Used Part Database is Currently Under Development. Projected Completion Date - January 2011.</b>
     </center>
    </div>
    <div class="mainbody">
   <h3>Used Parts Networking - Sell - Buy - Locate!</h3>
   <h3>Search Our Online Inventory - Coming Soon</h3>
   
    <p>    Search our online inventory of used car parts. Our collection is always growing as we find new & useful product. All items are sold as-is and are presumed to be in working order before removed. Shipping & local pick-up is availbile. Cash & Credit Cards Only.    </p>
   <h3>Keep An Eye Out
    Wanted Ads</h3>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr>
      <td width="5%" bgcolor="#009900"><strong>Year</strong></td>
      <td width="6%" bgcolor="#009900"><strong>Make</strong></td>
      <td width="9%" bgcolor="#009900"><strong>Model</strong></td>
      <td width="28%" bgcolor="#009900"><strong>Part Description</strong></td>
      <td width="13%" bgcolor="#009900"><strong>Price</strong></td>
      <td width="39%" bgcolor="#009900"><strong>Contact Information</strong></td>
    </tr>
     <tr>
      <td>1998</td>
      <td>GMC</td>
      <td>1500 SL<br />
      Ext Cab</td>
      <td>Pair of Rust Free Doors</td>
      <td>150.00</td>
      <td><a href="mailto:nchenevert@gmail">N. Chenevert</a><br />
       Durham, ME
       <br /></td>
     </tr>
     <tr>
      <td bgcolor="#CCCCCC">1997+</td>
      <td bgcolor="#CCCCCC">Acura</td>
      <td bgcolor="#CCCCCC">Integra GSR</td>
      <td bgcolor="#CCCCCC">Complete Engine Swap</td>
      <td bgcolor="#CCCCCC">1,000.00</td>
      <td bgcolor="#CCCCCC"><a href="mailto:IdesignedYou@Gmail">J. Leighton</a><br />
       Pownal, ME<br /></td>
     </tr>
     <tr>
      <td>Your</td>
      <td>Wanted</td>
      <td>Ad</td>
      <td>Goes</td>
      <td>Here</td>
      <td>FREE!</td>
     </tr>
   </table>
</div>
         <div class="footer"><center>
        <font size="-1">1-207-449-2288 &#8226; <a href="mailto:&quot;iDesignedYou@Gmail&quot;">iDesignedYou@Gmail</a> &#8226; <a href="sitemap.html" title="Site Map" target="_blank">Site Map</a><br />
        &copy; 2010 MaineJunkYards, All Rights Reserved.<br /><a href="ourdisclaimer/?i=MaineJunkYards" target="_blank">
        <img src="ourdisclaimer/ourdisclaimer.gif" alt="Our Disclaimer"
width="80" height="15" border="0" /></a><br />
        </font>
   </center>
    </div>
 </div>
<!-- end .container --></div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="w3/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Find Used Parts Now! Fast, easy, &amp; simple! - MaineJunkYards</title>
  6. <META name="description" content="Find & Locate Maine Junk Yards Near You! MaineJunkYards" />
  7. <META name="keywords" content="maine, junkyards, junk, yards, salvage, scrap, metal, cars, trucks, used, parts, auotmotive, chevy, ford, dodge, honda, acura, toyota, gmc, lexus, audi, bmw, tires, rims, shell" />
  8. <style type="text/css">
  9. <!--
  10. body {
  11.     font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  12.     margin: 0;
  13.     padding: 0;
  14.     color: #000;
  15.     background-image:url(../img/background.png);
  16.     background-repeat:repeat-y;
  17.     background-position: top center;
  18.     background-color: #3ba13b;
  19. }
  20. /* ~~ Element/tag selectors ~~ */
  21. ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
  22.     padding: 0;
  23.     margin: 0;
  24. }
  25. h1, h2, h3, h4, h5, h6, p {
  26.     margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
  27.     padding-right: 15px;
  28.     padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
  29. }
  30. a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
  31.     border: none;
  32. }
  33. /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
  34. a:link {
  35.     color: #42413C;
  36.     text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
  37. }
  38. a:visited {
  39.     color: #6E6C64;
  40.     text-decoration: underline;
  41. }
  42. a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
  43.     text-decoration: none;
  44. }
  45. /* ~~ this fixed width container surrounds all other elements ~~ */
  46. .container {
  47.     width: 960px;
  48.     background: #FFF;
  49.     margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
  50. }
  51. /* ~~ This is the layout information. ~~
  52. 1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
  53. */
  54. .content {
  55.     padding-left: 1px;
  56. }
  57. .quote { padding: 6px 4px 4px 6px; background-color:#9F6;
  58. }
  59. /* ~~ miscellaneous float/clear classes ~~ */
  60. .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
  61.     float: right;
  62.     margin-left: 8px;
  63. }
  64. .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
  65.     float: left;
  66.     margin-right: 8px;
  67. }
  68. .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
  69.     clear:both;
  70.     height:0;
  71.     font-size: 1px;
  72.     line-height: 0px;
  73. }
  74. body,td,th {
  75.     font-family: Arial, Helvetica, sans-serif;
  76. }
  77. -->
  78. </style>
  79. <script type="text/javascript">
  80. function MM_swapImgRestore() { //v3.0
  81.  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  82. }
  83. function MM_preloadImages() { //v3.0
  84.  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  85.   var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  86.   if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  87. }
  88. function MM_findObj(n, d) { //v4.01
  89.  var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  90.   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  91.  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  92.  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  93.  if(!x && d.getElementById) x=d.getElementById(n); return x;
  94. }
  95. function MM_swapImage() { //v3.0
  96.  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  97.   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  98. }
  99. </script>
  100. <script type="text/javascript">
  101.  var _gaq = _gaq || [];
  102.  _gaq.push(['_setAccount', 'UA-19201113-1']);
  103.  _gaq.push(['_trackPageview']);
  104.  (function() {
  105.   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  106.   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '.google-analytics/ga.js';
  107.   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  108.  })();
  109. </script></head>
  110. <body onload="MM_preloadImages('../img/over/images/locate.gif','../img/over/images/MNKJKYRDSlayout_03.gif','../img/over/images/MNKJKYRDSlayout_04.gif','../img/over/images/MNKJKYRDSlayout_05.gif')">
  111. <div class="container">
  112.  <div class="content">
  113.          
  114.       <div class="head"> <a href="index.html"><img src="../img/images/MNKJKYRDSlayout_01.gif" width="278" height="287" /></a><a href="locateme.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('locate','','../img/over/images/locate.gif',1)"><img src="../img/images/locate.gif" alt="Locate Maine Junk Yards" name="locate" width="167" height="287" border="0" id="locate" /></a><a href="usedparts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('usedparts','','../img/over/images/MNKJKYRDSlayout_03.gif',1)"><img src="../img/images/MNKJKYRDSlayout_03.gif" alt="Find Used Parts" name="usedparts" width="168" height="287" border="0" id="usedparts" /></a><a href="selljunkcars.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('junk cars','','../img/over/images/MNKJKYRDSlayout_04.gif',1)"><img src="../img/images/MNKJKYRDSlayout_04.gif" alt="Sell Junk Cars" name="junk cars" width="168" height="287" border="0" id="junk cars" /></a><a href="scrapmetal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('recyclemetal','','../img/over/images/MNKJKYRDSlayout_05.gif',1)"><img src="../img/images/MNKJKYRDSlayout_05.gif" alt="Recycle Metal" name="recyclemetal" width="178" height="287" border="0" id="recyclemetal" /></a></div>
  115.     <div class="quote">
  116.      <center>
  117.      <b>The Used Part Database is Currently Under Development. Projected Completion Date - January 2011.</b>
  118.      </center>
  119.     </div>
  120.     <div class="mainbody">
  121.    <h3>Used Parts Networking - Sell - Buy - Locate!</h3>
  122.    <h3>Search Our Online Inventory - Coming Soon</h3>
  123.    
  124.     <p>    Search our online inventory of used car parts. Our collection is always growing as we find new & useful product. All items are sold as-is and are presumed to be in working order before removed. Shipping & local pick-up is availbile. Cash & Credit Cards Only.    </p>
  125.    <h3>Keep An Eye Out
  126.     Wanted Ads</h3>
  127.   <table width="100%" border="0" cellspacing="0" cellpadding="0">
  128.      <tr>
  129.       <td width="5%" bgcolor="#009900"><strong>Year</strong></td>
  130.       <td width="6%" bgcolor="#009900"><strong>Make</strong></td>
  131.       <td width="9%" bgcolor="#009900"><strong>Model</strong></td>
  132.       <td width="28%" bgcolor="#009900"><strong>Part Description</strong></td>
  133.       <td width="13%" bgcolor="#009900"><strong>Price</strong></td>
  134.       <td width="39%" bgcolor="#009900"><strong>Contact Information</strong></td>
  135.     </tr>
  136.      <tr>
  137.       <td>1998</td>
  138.       <td>GMC</td>
  139.       <td>1500 SL<br />
  140.       Ext Cab</td>
  141.       <td>Pair of Rust Free Doors</td>
  142.       <td>150.00</td>
  143.       <td><a href="mailto:nchenevert@gmail">N. Chenevert</a><br />
  144.        Durham, ME
  145.        <br /></td>
  146.      </tr>
  147.      <tr>
  148.       <td bgcolor="#CCCCCC">1997+</td>
  149.       <td bgcolor="#CCCCCC">Acura</td>
  150.       <td bgcolor="#CCCCCC">Integra GSR</td>
  151.       <td bgcolor="#CCCCCC">Complete Engine Swap</td>
  152.       <td bgcolor="#CCCCCC">1,000.00</td>
  153.       <td bgcolor="#CCCCCC"><a href="mailto:IdesignedYou@Gmail">J. Leighton</a><br />
  154.        Pownal, ME<br /></td>
  155.      </tr>
  156.      <tr>
  157.       <td>Your</td>
  158.       <td>Wanted</td>
  159.       <td>Ad</td>
  160.       <td>Goes</td>
  161.       <td>Here</td>
  162.       <td>FREE!</td>
  163.      </tr>
  164.    </table>
  165. </div>
  166.          <div class="footer"><center>
  167.         <font size="-1">1-207-449-2288 &#8226; <a href="mailto:&quot;iDesignedYou@Gmail&quot;">iDesignedYou@Gmail</a> &#8226; <a href="sitemap.html" title="Site Map" target="_blank">Site Map</a><br />
  168.         &copy; 2010 MaineJunkYards, All Rights Reserved.<br /><a href="ourdisclaimer/?i=MaineJunkYards" target="_blank">
  169.         <img src="ourdisclaimer/ourdisclaimer.gif" alt="Our Disclaimer"
  170. width="80" height="15" border="0" /></a><br />
  171.         </font>
  172.    </center>
  173.     </div>
  174.  </div>
  175. <!-- end .container --></div>
  176. </body>
  177. </html>


Can you help point out that little smudge in there somewhere that's stopping me from moving on? :|
Thank You,
Cerebralailment
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

something in your layout is a few pixels wider than the 960px specified for .container If you make it a bit wider (963px) it fixes it. I assume the issue is in the width of the images in your nav but i could be wrong.

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 62 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.