How do I put one <div> element below another <div> - html

Question

I just finished doing HTML/CSS with Codecademy. One of the "projects" there is to make your own resume. I took the HTML/CSS from that project, and I'm tweaking it to make the resume look better. I'm currently trying to put one div - the part of the resume where text about my career objective will go - under another div, the header. It is, however, not working. The div for the "objective" is currently behind the div for the header. How on earth do I get that second div for the objective to go underneath the first div?
I read something about how I should float the header div to the left and then put clear:both; in the div for the objective, but that's not working.
HTML
<div id="header">
<p id="name">My Name</p>
<p id="email">myemail#email.com</p>
</div>
<div id="objective"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer">
<p>1234 Anywhere Street, Brooklyn NY 11216 | Tel: [phone]</p>
</div>
CSS
div {
border-radius: 5px;
}
#header {
z-index:1;
position: fixed;
width: 98%;
margin-top: -20px;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
float:left;
}
#name {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email{
float:right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
a:hover {
font-weight: bold;
}
#objective {
height: 50px;
background-color: #668284;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
clear:both;
color: #ffffff;
}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}
.right {
position: relative;
float: right;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #F4EBC3;
margin-bottom: 10px;
}
#footer {
position: relative;
height: 50px;
background-color: #668284;
clear: both;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
color: #ffffff;
}
#footer p {
position: relative;
padding-top: 15px;
}

Answer 1

For example:
<div class="div1">KSD;JSFAJ;SSD;</div>
<div class="div2">KSD;JSFAJ;SSdfaD;</div>
Css with float:
.div1 {
float: none;
}
.div2 {
float: none;
}
Css with display:
.div1 {
display: inline;
}
.div2 {
display: inline;
}

Answer 2

Here is the updated HTML :
<div id="header">
<p id="name">My Name</p>
<p id="email">myemail#email.com</p>
</div>
<div style="height:50px;width:98%;">
</div>
<div id="objective">Objective goes here</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer">
<p>1234 Anywhere Street, Brooklyn NY 11216 | Tel: [phone]</p>
</div>
This will show the objective div underneath header div.
Also this is a link for your reference.

Answer 3

Here is update CSS, This show the responsive your html
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
border-radius: 5px;
}
#header {
width: 98%;
margin: 0 auto;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
}
#name {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email{
float:right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
a:hover {
font-weight: bold;
}
#objective {
height: 50px;
background-color: #668284;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
clear:both;
color: #ffffff;
}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}
.right {
position: relative;
float: right;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #F4EBC3;
margin-bottom: 10px;
}
#footer {
position: relative;
height: 50px;
background-color: #668284;
clear: both;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
color: #ffffff;
}
#footer p {
position: relative;
padding-top: 15px;
}
Don't ever forget to add this code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
So that you won't have empty space on your div
DEMO

Answer 4

I think its easier using bootstrap, here is the link http://getbootstrap.com/css/
What bootstrap does is that it creates containers that wrap the content of your site. It divides the site in rows. To do that you need and . With this bootstrap you can divide your rows in 12 cells.
Here is an example of how I divided my portfolio in 3 columns of 4 spaces
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<h3 class="text-body"><u>Block vs Inline</u>
</h3>
<p class="p-text"><span>Block Elements</span> are those who take the complete line and full width of the page creating a "box".<br>
<span>Inline Elements</span> are those who doesn´t affect the layout, just the element inside the tag.
</p>
</div>
<div class="col-md-4">
<h3 class="text-body"><u>Selectors</u></h3>
<p class="p-text"><span>Class selectors</span> are used to target elements with specific attributes<br>On the other hand, <span>id selectors</span> are just for unique elements.</p>
</div>
<div class="col-md-4">
<h3 class="text-body"><u>Responsive Layout</u></h3>
<p class="p-text"><span>Responsive Layout</span> is the combination of html and css design to make the website look good in terms of enlargement, shrink and width in any screen (<em>computers, laptops, netbooks, tablets, phones</em>). </p>
</div>
</div>