css - div 的 HTML-CSS 位置问题

Question

我遇到了一个小问题，我测试的任何东西似乎都不起作用。

我的 HTML:

<div id="parent">
    <div id="top_parent">Top_background
        <div id="top">Top_Picture</div></div>
    <div id="content">Here comes random stuff<div>
        </div>

        <div id="bottom">Footer</div>

CSS:

#top_parent {
    background:#f00;
    height:100px;
}

#top{
    background:#0f0;
    float:right;
    position:relative;   
    height:100px;
    width:50%;
}
#content{
    top:-50px;
    background:#00f;
    <!--   position:relative;-->
    height:100px;
    width:80%;
    margin:auto;
}
#parent{
    background:#000;
    height:350px;
    width:100%; 
}

#bottom {
    height: 50px;
    background:#ff0;
    bottom:0px;
    <!--position:absolute; -->
    <!--position:relative; -->
}

现在我的问题是，页脚不会在 parent div 下，它停留在内容区域中。我做错了什么？

jsF 链接:my source

感谢您的帮助。

Answer 1

你还没有关闭这个div:

<div id="content">Here comes random stuff<div>

应该是:

<div id="content">Here comes random stuff</div>

如果你缩进你的 div，你可以很容易地看到:

<div id="parent">
  <div id="top_parent">Top_background
    <div id="top">Top_Picture</div>
  </div>
  <div id="content">Here comes random stuff<div> <!-- Can see the problem -->
</div>
<div id="bottom">Footer</div>