CSS中柱-清除错误？

我对CSS非常陌生，已经在这里坐了好几个小时，试图弄明白为什么我的中间部分没有显示为列。我在网上搜索过，显然没有成功。我试着重新定位潜水舱，清理所有东西，并将水从所有东西中浮出来。一定很简单，但我不知道是什么。有人能帮忙吗

如果这不合适，我为大量代码道歉，但我还没有上传任何东西

提前谢谢

HTML

---

我看到的问题是，您试图在没有任何容器的情况下将一系列div一个接一个地堆叠起来，以创建一个三列页面设计，而这可以通过css来完成。为每一列创建一系列容器会更简单，您可以使用这些容器来堆叠div。以此为例:

如果您创建了一系列列div，那么您可以轻松地将所有页面节堆叠在自己的列中，这样您就可以轻松地在页面中堆叠任意多的节，而无需返回css并按照现在的方式定位

<div class="column">
   <section>
   <section>
</div>

<div class="column">
   <section>
   <section>
</div>

<div class="column">
   <section>
   <section>
</div>

下面是您的代码演示，其中的列实现了我认为您需要的结果：，您可以在这里编辑fiddle:

---

请注意这些部分是如何堆叠在柱内的，这样您可以堆叠任意数量的部分，并将它们适当地堆叠在其容器内。

我无法弥补您想要的设计，你能发布一个模型或一个更好的解释你期望的是什么吗？很抱歉-我编辑了我的帖子以显示一个链接到图片，因为我的代表表示我现在还不能发布。请制作一个你的结果的模型，你到底需要什么，因为我们会看到你在看什么&你是如何制作模型的代码的让我们更容易发现您代码中的错误，我们将尝试获得解决方案……我的模型如上图所示。这不合适吗？我不知道你说的是什么意思，我是怎么做代码的？如果有帮助的话，我在Aptana Studio3中编码。我已经说了我所需要的-我的中柱似乎清除了一切，我不知道为什么。@user1289829等等，你发布了一个错误的模型？我以为这就是你想要的设计：P你能发布另一个你真正想要的设计模型吗？我还是不明白你想要的设计。就是这样-太棒了！我应该先创建单独的容器。我不理解一些CSS，但是，我可以阅读它。谢谢你对我的坚持@顺便提一下，tomdot我在列上使用了这种clearfix技术，因此您可以阅读使用它的“原因”。

#page-container {
width:960px;
margin:auto;
background:red;
}

html, body {
margin:0;
padding:0;
}

#logo {
background:purple;
height:150px;
width:270px;
margin-right:450px;
}

#mainpic {
background:darkgrey;
width:270px;
height:450px;
}

#navbar {
float:right;
background:lightblue;
height:50px;
width:690px;
}

#headline {
background:grey;
height:200px;
margin-left:270px;
margin-right:350px;
}

/* News Items Mock - height:350px */ 
#newsitems {
background:blue;
margin-left:270px;
margin-right:350px;
}

#mediaplayer {
clear:both;
float:right;
background:black;
height:200px;
width:350px;
}

/* Sightings Mock - height:150px; */
#sightings {
clear:both;
float:right;
background:green;
width:350px;
}

#blogheader {
clear:both;
float:right;
background:darkgreen;
height:40px;
width:350px;
}

#sociallinks {
clear:both;
float:right;
background:orange;
height:40px;
width:350px;
}

#footer {
background:yellow;
clear:both;
height:30px;
}

<div class="column">
   <section>
   <section>
</div>

<div class="column">
   <section>
   <section>
</div>

<div class="column">
   <section>
   <section>
</div>

.column:before, .column:after {
    content:"";
    display:table;
}

.column:after {
    clear:both;
}

.column {
    zoom:1; /* ie hasLayout fix */
    float:left;
}