如何居中 3 列 CSS 分区站点

Question

我的网站有一个100%宽度的页眉和页脚，以及3列。这些列的宽度必须是固定的，但位于页面的中心。

.HTML

<div id="Table_01">
    <div id="Header"></div>
    <span id="LeftCol">Left Col </span>
    <span id="MidCol">Middle    </span>
    <span id="RightCol">Right Col   </span>
    <div id="Footer">Footer</div>
</div>

.CSS

 #Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
}    
#Header {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:42px;
    background-image: url("images/Header.gif");
}
#LeftCol {
    position:absolute;
    left:0px;
    top:42px;
    width:300px;
    height:422px;
    text-align:center;
    border:2px solid;
}    
#MidCol {
    position:absolute;
    left:300px;
    top:42px;
    width:550px;
    height:422px;
    text-align:center;
    border:2px solid;
}    
#RightCol {
    position:absolute;
    left:850px;
    top:42px;
    width:300px;
    height:422px;
    text-align:center;
    border:2px solid;
}    
#Footer {
    position:absolute;
    left:0px;
    top:464px;
    width:1000px;
    height:1536px;
}

吉斯菲德尔

Answer 1

您需要的是

应用于容器的position:relative和margin:0 auto的混合。

添加容器div：

.container {
    width:1150px;
    margin:0 auto;
    position:relative;
}

请参阅更新的 JSFIDDLE