CSS 3列流体布局问题，第3列太宽(CSS 3 column fluid layout issues, 3rd column too wide)

 我一直试图按照http://www.alistapart.com/articles/holygrail/ （左300px固定，中心流体，右300px固定）实施3柱流体布局，由于某种原因，第3列正在吹灭布局的右侧。  
 这就是我想要的和我得到的： http ： //i.stack.imgur.com/qFVVP.png  
 我正在Linux Chrome和FF上测试它 - 这两个版本都是最新版本。  
 我的css是：  
#home {
    min-width:900px;
    font-family: arial;
    font-size: 12px;
    color: #565656;
}

/* Main Page Divisions */

#page-top {
    height: 120px;
    background-color: #ffffffff;
}

#page-middle {
    height: 250px;
    background-color: #6AC0EB;
    float:left;
    width:100%;
    padding-left: 300px;   /* LC width */
    padding-right: 300px;  /* RC width */
}

#page-middle .column {
  position: relative;
  float: left;
}

#page-bottom {
    clear:both;
    height: 300px;
    background-color:#EDEDED;
    overflow:scroll;
}

/* Middle Page Divisions */

#page-middle-centre {
    width:60%;
}

#page-middle-left {
    width: 300px;          /* LC width */
    right: 300px;          /* LC width */
    margin-left: -60%;
}
#page-middle-right {
    width: 300px;          /* RC width */
    margin-right:-300px;  /* RC width */
    background: #FDE95E;
}

/* Bottom Page Divisions */

#page-bottom-left {
    width: 49%; 
    float:left;
    text-align: right;
}

#page-bottom-right {
    width: 49%; 
    float:right;
    text-align: left;
}

h2 {
    font-family: "Quicksand";
    font-size: 130%;
}

h1#title-block {
    font-family: "Quicksand";
    font-size: 3em;
    color: #FFFFFF;
    letter-spacing:-3px;
}
 
 我的HTML如下：  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Test Layout</title>
    <link rel="stylesheet" type="text/css" href="reset.css" />  
    <link rel="stylesheet" type="text/css" href="test.css" />
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body id="home">


    <div id="page-top">
    This is the header  
  </div>


    <div id="page-middle">

    <div id="page-middle-centre" class="column">
        middle section middle section middle section middle section middle section middle section middle section middle section  
    </div>      

    <div id="page-middle-left" class="column">
          <h1 id="title-block">Title Block</h1>
          <p id="quicksand">Menu 1 | Menu 2 | Menu 3 | Menu 4</p>
    </div>

    <div id="page-middle-right" class="column">
      Right section Right section Right section Right section Right section Right section Right section Right section 
    </div>  
  </div>

    <div id="page-bottom">
    This is the footer
  </div>
</body>
</html>

I've been trying to implement a 3 column fluid layout by following http://www.alistapart.com/articles/holygrail/ (left 300px fixed, center fluid, right 300px fixed) and for some reason the 3rd column is blowing out the right side of the layout. 
Here's what I want vs what I'm getting: http://i.stack.imgur.com/qFVVP.png 
Am testing it on Linux Chrome and FF - both latest stable versions. 
My css is: 
#home {
    min-width:900px;
    font-family: arial;
    font-size: 12px;
    color: #565656;
}

/* Main Page Divisions */

#page-top {
    height: 120px;
    background-color: #ffffffff;
}

#page-middle {
    height: 250px;
    background-color: #6AC0EB;
    float:left;
    width:100%;
    padding-left: 300px;   /* LC width */
    padding-right: 300px;  /* RC width */
}

#page-middle .column {
  position: relative;
  float: left;
}

#page-bottom {
    clear:both;
    height: 300px;
    background-color:#EDEDED;
    overflow:scroll;
}

/* Middle Page Divisions */

#page-middle-centre {
    width:60%;
}

#page-middle-left {
    width: 300px;          /* LC width */
    right: 300px;          /* LC width */
    margin-left: -60%;
}
#page-middle-right {
    width: 300px;          /* RC width */
    margin-right:-300px;  /* RC width */
    background: #FDE95E;
}

/* Bottom Page Divisions */

#page-bottom-left {
    width: 49%; 
    float:left;
    text-align: right;
}

#page-bottom-right {
    width: 49%; 
    float:right;
    text-align: left;
}

h2 {
    font-family: "Quicksand";
    font-size: 130%;
}

h1#title-block {
    font-family: "Quicksand";
    font-size: 3em;
    color: #FFFFFF;
    letter-spacing:-3px;
}
 
And my HTML is as follows: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Test Layout</title>
    <link rel="stylesheet" type="text/css" href="reset.css" />  
    <link rel="stylesheet" type="text/css" href="test.css" />
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body id="home">


    <div id="page-top">
    This is the header  
  </div>


    <div id="page-middle">

    <div id="page-middle-centre" class="column">
        middle section middle section middle section middle section middle section middle section middle section middle section  
    </div>      

    <div id="page-middle-left" class="column">
          <h1 id="title-block">Title Block</h1>
          <p id="quicksand">Menu 1 | Menu 2 | Menu 3 | Menu 4</p>
    </div>

    <div id="page-middle-right" class="column">
      Right section Right section Right section Right section Right section Right section Right section Right section 
    </div>  
  </div>

    <div id="page-bottom">
    This is the footer
  </div>
</body>
</html>

原文：https://stackoverflow.com/questions/5130904

更新时间：2022-03-21 17:03

最满意答案

 在您的HTML中，您的列div按以下顺序排列：  
 
  左栏  
  中心栏  
  右栏  
 
 您在alistapart站点上使用的示例的列按以下顺序排列：  
 
  中心栏  
  左栏  
  右栏  
 
 切换它们可能会正常工作。 祝你好运！ 

For some reason the width:100% on the page-middle element was causing it... 
#page-middle {
    height: 250px;
    background-color: #6AC0EB;
    float:left;
    width:100%;   <----------------
    padding-left: 300px;   /* LC width */
    padding-right: 300px;  /* RC width */
}
 
Once it was removed, everything aligned. Not quite sure I understand the logic behind this, but at least it's fixed.