无法缩小中心内容

Question

我几乎在网站的每个元素上都使用绝对定位。它正在正常工作 但是我唯一的问题是，当我缩小页脚仍然很好centererd但标题（#header）和内容（#content）向左侧移动。我使用的是margin：auto，甚至试图用Jquery来集中它们，但问题仍然存在。所以任何人都可以给我一个解决方案。我会很感激。

这里是网站：http://contestlancer.com/Trivia/

Answer 1

你应该把你的ID为格“搁置”和“点对点”在一个包装DIV，给汽车保证金为包装DIV。

<div style="margin-left:auto;margin-right:auto;width:1024px;" > 
    <div id="aside"> </div>  
    <div id="righter"> </div> 
</div> 

Answer 2

使用position:absolute，你基本上接管上的定位完全控制，这使得布局一项艰巨的任务，因为你不留下任何东西给浏览器。

• 使用position:relative而不是position:absolute在哪里使用。使用top:0px;' on both＃内容and＃页脚。
• 在#header和#content中使用％作为顶部的左边距和宽度，就像已经在#footer中完成一样。
为 #content

例子：

#aside 
{ 
    top: 30px; 
    float: left; 
    display: inline; 
    background-color: #F7B800; 
    min-height: 500px; 
    position: relative; 
    border-radius: 9px; 
    text-align: center; 
    margin-left: 15%; 
    left: 0; 
    width: 30%;  
} 

#righter { 
    vertical-align: baseline; 
    top: 0px; 
    float: right; 
    display: inline; 
    left: 0px; 
    position: relative; 
    min-height: 550px; 
    word-wrap: break-word; 
    margin-right: 5%; 
    width: 45%; 
    margin-left: 5%;  
} 

一个重要的事情是，margin-left，margin-right和width两个部分加起来为100％。

Answer 3

当我使用Firebug检查您的网站它表明#logo，#navigation，#righter和#aside在像素一套margin-left: ...px。

这意味着即使在缩小或放大时，它们始终都会有设置像素数量的左边距。请尝试使用百分比进行处理。即：

#righter { 
    left: 40%; 
} 

Answer 4

通常我做什么，当有炒CSS和HTML混合的牛负荷，然后我会用jQuery迫使它：

var w = $(window), 
    el = $('#elementIwantToCenter'); 

//when first viewing the site => center el horizontally 
el.css({position: 'absolute', left: (w.width()-parseFloat(el.css('width')))/2}); 

//when resizing browser window => center el horizontally 
w.resize(function() { 
    el.css({left: ($(this).width()-parseFloat(el.css('width')))/2}); 
}); 
w.trigger('resize'); 

例如：http://jsfiddle.net/XSDM7/