css - 在一个父 div 中放置多个 div

Question

我已经看到几个朝这个方向发展的问题，但没有任何帮助。每个人都说只需将父 div 位置设置为相对位置，将子位置设置为绝对位置即可。但我的问题是每个 div 都在我父 div 的 0/0 点。内部元素之间似乎互不相识。

我的页面应该是这样的:

http://imageshack.us/photo/my-images/854/unbenanntgoc.png/

在我的 html 中，我只定义了我的 div:

<div id="content">

<div id="header" />
<div id="naviContent" />
<div id="imageContent" />
<div id="tagContent" />
<div id="textContent" />

</div>

因此导航图像和标签内容 div 应该 float 。

这就是我的 CSS 的样子:

@charset "utf-8";

body {
    background-color:#33FF00;
}

#header {
    height:100px;
    background-color:#FFFFFF;
    position:relative;
}

#naviContent {
    width:25%;
    background-color:#F0F;
    float:left;
}

#imageContent {
    background-color:#000;
    position:absolute;
    float:left;
    width:800px;
    height:600px;
}

#tagContent {
    background-color:#900;
    position:absolute;
    float:left;
    width: 25%;
}

#textContent {
    background-color:#0000FF;
    clear:both;
}

#content {
    height:1600px;  
    width:1200px;
    background-color:#999999;
    margin-left: auto; 
    margin-right: auto;
    padding:10px;
    position:relative;
}

所以也许有人能告诉我为什么我所有的元素(黑色、黄色、红色、灰色和绿色)都定位到粉色元素的 0/0 点？

提前致谢

Answer 1

您需要正确关闭 DIV -

<div id="content">

<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text  </div>

</div>

编辑: Working Fiddle您需要调整 float 宽度，您就完成了!