css divs positioning is wrong overlapping in the middle - html

Question

i have no idea what the problem is! No matter what i try it wont work, the divs just overlap in the middle of the screen. I tried using every possible combination of display and position.
I need the divs to go one under another.
http://jsfiddle.net/s2dv6agr/
please help :(
#container{
position: relative;
}
#container1{
position: absolute;
z-index: 100;
}
#container2{
position: absolute;
z-index: 110;
}

Answer 1

Assuming the following HTML
<div id="container">
<div id="container1">
Hello
</div>
<div id="container2">
Hello again
</div>
</div>
#container {
position: relative;
}
#container1 {
position: relative;
z-index: 100;
}
#container2 {
position: relative;
z-index: 110;
}
This will display below each other.
http://jsfiddle.net/baLz1tvo/

Answer 2

Remove position:absolute and use position:relative at everywhere.
Use:
#container1{float: left}
#container2{float:right}

Answer 3

Try This : just example
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
background: url(images/stripe.png) repeat;
}
p {
font-size: 1.3em;
margin-bottom: 15px;
}
#page-wrap {
width: 660px;
background: white;
padding: 20px 50px 20px 50px;
margin: 20px auto;
min-height: 500px;
height: auto !important;
height: 500px;
}
#contact-area {
width: 600px;
margin-top: 25px;
}
#contact-area input, #contact-area textarea {
padding: 5px;
width: 371px;
font-family: Helvetica, sans-serif;
font-size: 1.4em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}
#contact-area input.submit-button {
width: 100px;
float: right;
margin-top:30px;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.4em;
}
<div id="contact-area">
<form method="post" action="contactengine.php">
<label for="Name">Gaming:</label>
<input type="text" name="Name" id="Name" />
<label for="City">Sports:</label>
<input type="text" name="City" id="City" />
<label for="Email">Watching Tv:</label>
<input type="text" name="Email" id="Email" />
<label for="Email">Sleeping:</label>
<input type="text" name="Email" id="Email" />
<label for="Email">Hiking:</label>
<input type="text" name="Email" id="Email" />
<label for="Email">Skiing:</label>
<input type="text" name="Email" id="Email" />
<input type="submit" name="submit" value="Add my info" class="submit-button" />
</form>

Answer 4

Can you give some explanation for position: absolute , normally if we use position: absolute, everything come over to parent element. Use position: absolute with top, left , right , bottom properties to align different places.