2 div position with "min-height" and "top" property - html

Question

I have 2 divs with min-height . The first one has a top property of 470px. I want the second div to display staright underneath the first div without any space between. I have also tried display: block and putting the divs into a table, neither of which worked any better. Here is te css:
#content {
width: 100%;
position: absolute;
top: 470px;
background: #1C1C1C;
min-height: 100px;
overflow: hidden;
}
#content2 {
width: 100%;
position:;
top:;
background: #333333;
min-height: 100px;
overflow: hidden;
}
HTML:
<div id="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div id="content2">
<p>texttexttexttexttext</p>
</div>

Answer 1

Once you absolutely position an element you take it out of the document flow so you can't really have something come right after it unless you absolutely position it as well. I changed it to just use a top margin to put it where you want it. If you need elements in that top 470px then you can absolutely position those elements.
And the borders I put in are for illustration only.
#content {
border: 1px solid red;
margin-top: 470px;
background: #1C1C1C;
min-height: 100px;
overflow: hidden;
}
#content2 {
border: 1px solid blue;
background: #333333;
min-height: 100px;
overflow: hidden;
}
<div id="content">First DIV</div>
<div id="content2">Second DIV</div>

Answer 2

Because #content is positioned absolutely, you cannot do this without changing the HTML structure.
You can add a container element to the divs which is positioned absolutely with the same top as of #content1 and add the two divs inside the container without position.
#container {
width: 100%;
position: absolute;
top: 470px;
}
#content {
border: 1px solid red;
background: #1C1C1C;
min-height: 100px;
overflow: hidden;
}
#content2 {
width: 100%;
background: #333333;
min-height: 100px;
overflow: hidden;
}
<div id="container">
<div id="content">
<p>texttexttexttexttexttexttexttexttexttexttexttexttext</p>
</div>
<div id="content2">
<p>texttexttexttexttext</p>
</div>
</div>

Answer 3

You haven't posted your HTML, but this is my wild guess.
Try this:
<style>
#content {
width: 100%;
position: relative;
background: yellow;
min-height: 100px;
overflow: hidden;
}
#content2 {
width: 100%;
position: relative;
background: blue;
min-height: 100px;
overflow: hidden;
}
</style>
<div id = "content">
<p> Content - 1 </p>
</div>
<div id = "content2">
<p> Content - 2 </p>
</div>