...

View Full Version : 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?



<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum