Cannot find the proper HTML CSS fix the get my webpage centered. Please HALP!!!

JoshLowe · 12-31-2012, 01:53 AM

Hello Everyone!

Thank you for any assistance you can provide me with I'll try to be as specific as possible. I have scoured many forums and search results trying to figure out where I am going wrong with zero success. So now I figure I will try to actually speak to someone with my specific needs. So here goes.

I have a website www.vortexchillers.com and as you can see when it loads the whole content area of the page from banner down is off center. Now I know that this issue is most likely solved through my CSS and I have tried so many changes with no success. Do you guys see the culprit?

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" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Vortex Chillers; Low Fog Generators; Martin Professional; Glaciator</title>
<!-- InstanceEndEditable -->
<link href="/CSS/vortex_rootcss.css" rel="stylesheet" type="text/css" />
<script src="/SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="/SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-25550083-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' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script></head>

<body>
<div id="container">
  <div id="banner"><a href="http://www.vortexchillers.com/"><img src="http://www.vortexchillers.com/images/banners/uppergearban.jpg" width="1025
  " height="167" alt="Upper Header" /></a></div>
  <div id="nav_bar">
<ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="lowfog/lowfog.html" class="MenuBarItemSubmenu"> </a>
          <ul>
            <li><a href="lowfog/lowfoggers/lowfoggenerators.html" title="Low Fog Generators">LOW FOG GENERATORS</a></li>
            <li><a href="lowfog/chillers/lowfogchillers.html" title="Low Fog Chillers">FOG CHILLERS</a></li>
            <li><a href="fluids_specialeffects/volumizer/volumizer.html">VOLUMIZER CRYSTALS</a></li>
            <li><a href="lowfog/halloween_fog.html">HALLOWEEN FOG HOW-TO SERIES</a></li>
          </ul>
        </li>
        <li><a href="fluids_specialeffects/fluid/fogfluid.html" class="MenuBarItemSubmenu"> </a>
          <ul>
            <li><a href="fluids_specialeffects/fluid/vortex/vortexfluid.html" title="Vortex Ultra Pure Fog Fluid">VORTEX ULTRA</a></li>
            <li><a href="fluids_specialeffects/fluid/martin/martinfluid.html" title="Martin Professional Fog Fluid">MARTIN</a></li>
          </ul>
        </li>
        <li><a href="fogdistribution/distribution.html" class="MenuBarItemSubmenu"> </a>
          <ul>
            <li><a href="fogdistribution/distribution.html" title="Vortex Chillers Fog Distribution Systems">FOG DISTRIBUTION</a></li>
          </ul>
        </li>
        <li><a href="fluids_specialeffects/scenescents/scenescents.html" class="MenuBarItemSubmenu"> </a>
          <ul>
            <li><a href="fluids_specialeffects/scenescents/scenescents.html" title="Vortex Chillers Scene Scents">SCENE SCENTS</a></li>
            <li><a href="fluids_specialeffects/volumizer/volumizer.html">VOLUMIZER CRYSTALS</a></li>
          </ul>
        </li>
        <li><a href="fogcurtains/fogcurtains.html" class="MenuBarItemSubmenu"> </a>
          <ul>
            <li><a href="fogcurtains/fogcurtains.html" title="Vortex Chillers Fog Curtains">FOG CURTAINS</a></li>
          </ul>
        </li>
        <li><a href="fogcurtains/video/door3zr44v.html" class="MenuBarItemSubmenu"> </a>
          <ul>
            <li><a href="lowfog/lowfoggers/vortex/video/avalanche2000v.html" title="Vortex Chillers Avalanche 2000 Low Fog Machine">AVALANCHE 2000</a></li>
            <li><a href="lowfog/lowfoggers/vortex/video/avalanche4000v.html" title="Vortex Chillers Avalanche 4000 Low Fog Machine">AVALANCHE 4000</a></li>
            <li><a href="lowfog/chillers/video/frostbitev.html" title="Vortex Chillers Frost Bite! Low Fog Chiller">FROST BITE!</a></li>
            <li><a href="lowfog/chillers/video/monsterfogv.html" title="Vortex Chillers Monster Fog Low Fog Chiller">MONSTER FOG</a></li>
            <li><a href="lowfog/chillers/video/kodiakv.html" title="Vortex Chillers Kodiak Low Fog Chiller">KODIAK</a></li>
            <li><a href="lowfog/chillers/video/blizzardv.html" title="Vortex Chillers Blizzard Low Fog Chiller">BLIZZARD</a></li>
            <li><a href="lowfog/chillers/video/coldfusionv.html" title="Vortex Chillers Cold Fusion Low Fog Chiller">COLD FUSION</a></li>
            <li><a href="fogcurtains/video/door1850v.html" title="Vortex Chillers Door #1 All Natural Fog Curtain">DOOR #1</a></li>
            <li><a href="fogcurtains/video/door2zr44v.html" title="Vortex Chillers Door #2 All Natural Fog Curtain">DOOR #2</a></li>
            <li><a href="fogcurtains/video/door3zr44v.html" title="Vortex Chillers Door #3 All Natural Fog Curtain">DOOR #3</a></li>
          </ul>
        </li>
        <li><a href="fogmachines/fogmachines.html" class="MenuBarItemSubmenu"> </a>
          <ul>
            <li><a href="fogmachines/fogmachines.html" title="Professional Grade Fog/Smoke Machines">FOG MACHINES</a></li>
          </ul>
        </li>
        <li><a href="aboutus/contact.html" class="MenuBarItemSubmenu"> </a>
          <ul>
            <li><a href="aboutus/contact.html" title="Contact Vortex Chillers.Com">CONTACT</a></li>
            <li><a href="aboutus/testimonials.html">TESTIMONIALS</a></li>
            <li><a href="aboutus/history.html" title="History Of Vortex Chillers.Com">HISTORY</a></li>
            <li><a href="aboutus/returns.html" title="Vortex Chillers Return Policy">RETURNS</a></li>
          </ul>
        </li>
        <li><a href="aboutus/warranty.html" class="MenuBarItemSubmenu"> </a>
          <ul>
            <li><a href="aboutus/warranty.html" title="Vortex Chillers.Com One Year Guarantee">WARRANTY</a></li>
          </ul>
        </li>
      </ul>
  </div>
<div id="tabone_back">
  <div id="tabone_contain">    <div id="dropdown_description">
      <div id="CollapsiblePanel1" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0"></div>
        <div class="CollapsiblePanelContent"><!-- InstanceBeginEditable name="dropdownproddescription_editableinspry" --><!-- InstanceEndEditable --></div>
      </div>
    </div>
  <div id="testimonials">
    <div id="testimonials_div"><!-- InstanceBeginEditable name="testimonials_editable" --><a href="lowfog/lowfoggers/martin/glaciator.html">&quot;.....Amazing! The amount of fog produced was   fantastic, and the product works   perfect.....!&quot; --Andrew <a href="aboutus/testimonials.html">more</a><!-- InstanceEndEditable --></div>
  </div>
  <div id="testimonials_spacer"></div>
<div id="tabs">
  <div id="left_tab"><!-- InstanceBeginEditable name="taboneplaceholder" --><a href="fogmachines/martin/2000.html">PRODUCT</a><!-- InstanceEndEditable --></div>
      <div id="middle_tab"><!-- InstanceBeginEditable name="tabtwoplaceholder" --><a href="fogmachines/martin/2000.html">SPECS</a><!-- InstanceEndEditable --></div>
      <div id="right_tab"><!-- InstanceBeginEditable name="tabthreeplaceholder" -->ACCESSORIES<!-- InstanceEndEditable --></div>
</div>
    <div id="video">
      <div id="video_placeholder"><!-- InstanceBeginEditable name="tabonevideoplaceholder" --><a href="fogmachines/martin/video/2000v.html"><img src="http://www.vortexchillers.com/images/banners/videobut.jpg" width="75" height="22" alt="video" /></a><!-- InstanceEndEditable --></div>
    </div>
    <div id="medium_prodpic">
      <div id="mediumpic_placeholder"><!-- InstanceBeginEditable name="Tab One Main Pic" --><a href="fogmachines/martin/2000.html"><img src="http://www.vortexchillers.com/images/medprodpics/magnum2000salemed.jpg" alt="" name="tabonemainpicholder" width="292" height="298" id="tabonemainpicholder" /></a><!-- InstanceEndEditable --></div>
      </div><div id="tabonespacertosharing"></div>
<div id="sharing"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4eb867c03769f163"></script>
<!-- AddThis Button END --></div>
    <div id="product_description">
      <div id="product_heading"><!-- InstanceBeginEditable name="productheading_editable" -->Magnum 2000 Fogger<!-- InstanceEndEditable --></div>
      <div id="productdescription_div"><!-- InstanceBeginEditable name="productdescription_editable" --><a href="fogmachines/martin/2000.html">OVERSTOCK SALE! <strong>LIST $985!! </strong></a>  Here it is, the most popular professional grade fog machine in the world. The Magnum 2000 is a legend in the world of smoke and fog. Few other machines can match the optional....<!-- InstanceEndEditable --></div>
    </div>

    <div id="price">
      <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
<input type="image" src="http://www.vortexchillers.com/paypal/viewcart.jpg" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

      <div id="price_div"><!-- InstanceBeginEditable name="price_editable" -->$675!<!-- InstanceEndEditable --></div>
      <div id="freedelivery_div"><!-- InstanceBeginEditable name="freedelivery_editable" --><form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="WJU57LTEBE34L">
<input type="image" src="http://www.vortexchillers.com/paypal/freedelivery.jpg" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
<!-- InstanceEndEditable --></div>
    </div>
  </div>
</div>
  <div id="top_smallgiant">
    <div id="topsmallgiant"><!-- InstanceBeginEditable name="Top Small Giant Pic" -->
      <div id="smallgianteditable_container">
        <div id="smallgianteditablecontainer_video"> 
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="164" height="124" id="FLVPlayer">
            <param name="movie" value="FLVPlayer_Progressive.swf" />
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="scale" value="noscale" />
            <param name="salign" value="lt" />
            <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=images/flvvideos/Output/avalanche2000&amp;autoPlay=true&amp;autoRewind=true" />
            <param name="swfversion" value="8,0,0,0" />
            <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="164" height="124">
              <!--<![endif]-->
              <param name="quality" value="high" />
              <param name="wmode" value="opaque" />
              <param name="scale" value="noscale" />
              <param name="salign" value="lt" />
              <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=images/flvvideos/Output/avalanche2000&amp;autoPlay=true&amp;autoRewind=true" />
              <param name="swfversion" value="8,0,0,0" />
              <param name="expressinstall" value="Scripts/expressInstall.swf" />
              <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
              <div>
                <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
              </div>
              <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
          </object>
        <a href="lowfog/lowfoggers/vortex/avalanche2000.html">AVALANCHE 2000 MSR $2.999.</a></div>
      </div>
    <!-- InstanceEndEditable --></div>
  </div>
  <div id="mid_smallgiant">
    <div id="midsmallgiant"><!-- InstanceBeginEditable name="Mid Small Giant Pic" -->
      <div id="smallgianteditable_container2">
        <div id="smallgianteditablecontainer_video2"> 
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="164" height="95" id="FLVPlayer1">
            <param name="movie" value="FLVPlayer_Progressive.swf" />
            <param name="quality" value="high">
            <param name="wmode" value="opaque">
            <param name="scale" value="noscale">
            <param name="salign" value="lt">
            <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=images/flvvideos/Output/avalanchevsglaciator&amp;autoPlay=false&amp;autoRewind=true" />
            <param name="swfversion" value="8,0,0,0">
            <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
            <param name="expressinstall" value="Scripts/expressInstall.swf">
            <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="164" height="95">
              <!--<![endif]-->
              <param name="quality" value="high">
              <param name="wmode" value="opaque">
              <param name="scale" value="noscale">
              <param name="salign" value="lt">
              <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=images/flvvideos/Output/avalanchevsglaciator&amp;autoPlay=false&amp;autoRewind=true" />
              <param name="swfversion" value="8,0,0,0">
              <param name="expressinstall" value="Scripts/expressInstall.swf">
              <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
              <div>
                <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
              </div>
              <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
          </object>
        <a href="lowfog/lowfoggers/martin/glaciator.html">AVALANCHE vs GLACIATOR </a></div>
      </div>
    <!-- InstanceEndEditable --></div>
  </div>
  <div id="bot_smallgiant">
    <div id="botsmallgiant"><!-- InstanceBeginEditable name="Bot Small Giant Pic" --><a href="fogcurtains/fogcurtains.html"><img src="http://www.vortexchillers.com/images/smallprodpics/fogcurtainssm.jpg" alt="Vortex Chillers Fog Curtains" name="botsmallgiantproductphoto" width="170" height="173" id="botsmallgiantproductphoto" /></a><!-- InstanceEndEditable --></div>
  </div>
  <div id="bot_bar"></div>
  <div id="comment_div"><!-- InstanceBeginEditable name="commentbox_editable" --><!-- InstanceEndEditable --></div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
<!-- InstanceEnd --></html>

I hope someone can help me figure this out. It all started after I added the social media icons, but I can't figure out how it affected it. Thanks again for all your help!

-Joshua

tracknut · 12-31-2012, 03:27 AM

Remove the float on your body and container elements, and the padding on the body. That should do it...

Dave

Excavator · 12-31-2012, 03:37 AM

Hello JoshLowe,
tracknut is right but you will also need a DocType for your site to center in IE.
To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto

See the link about DocTypes in my signature line below.