Building a resume: text displaces <div> boxes instead of going on top


#1

Hi. I am so frustrated I can't get this to work. The

boxes look fine until I add text.

My html code:

    <!DOCTYPE html>
    <html>
    	<head>
    		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    		<title></title>
    	</head>
    	<body>
    	    <div id="header"></div>
    	        <p id="name">Shanna Gilkeson</p>
    			    <a href="mailto:gshanna@bgsu.edu"><p id="email">gshanna@bgsu.edu</p></a>
    	    <div class="left"></div>
    	    <div class="right"></div>
    	        <h4>Objective</h4>
    	            <p>To take a position as script reader.</p>
    	        <h4>Education</h4>
    	            <ul> 
    	           <li> Ph.D Candidate, Media and Communication, Bowling Green State University</li>
    	           MS, Written Communication (Teaching), Eastern Michigan University </li>
    	           BS, Electronic Media and Film Studies; English Language, Literature, and Writing, Eastern Michigan University</li>
    	            </ul>
    	            
    	        <h4>Skills</h4>
    	        <p> I have been trained to write scripts in conventional screenplay format. I am adept at the classical Hollywood paradigm, and I have served as the script supervisor on several independent film sets.</p>
    	        
    	    <div id="footer"></div>
    	
    	</body>
    </html>

My CSS code:

#header {
   	z-index: 1;
	position: fixed;
	width: 97.5%;
	margin-top: -20px;
	height: 60px;
	background-color: #FFFFCC;
	margin-bottom: 10px;
	border-radius: 5px;
}

.left {
   	position: relative;
	float: left;
	margin-top: 50px;
	width: 10%;
	height: 400px;
	background-color: #FFCC66;
	margin-bottom: 10px;
	border-radius: 5px;
	}

.right {  
    position: relative;
	float: right;
	margin-top: 50px;
	width: 88%;
	height: 400px;
	background-color: #F4EBC3;
	margin-bottom: 10px;
	border-radius: 5px;
}

#footer {
    position: relative;
	height: 50px;
	background-color: #FFFFCC;
	clear: both;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	text-align: center;
	color: #FFFFCC;
	border-radius: 5px;
}

#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;
	
h4 {
	margin-left: 5px;
	margin-bottom: 15px;
	font-family: Verdana, sans-serif;
}

li {
	list-style-type: square;
}

a:hover {
	font-weight: bold;
}

#footer p {
	position: relative;
	padding-top: 15px;
}

Any help is greatly appreciated. Thank you in advance.


How to insert text in <div>?
#2

i would nest the things inside the div, for example for #header:

<div id="header">
<p id="name">Shanna Gilkeson</p>
<a href="mailto:gshanna@bgsu.edu"><p id="email">gshanna@bgsu.edu</p></a>
</div>

you closed your header before putting anything inside

for next time, use one of the two following options to make your code/indent is visible:

select your code and press ctrl + shift + c (or cmd + shift + c if you use a mac)

if this instructions are unclear, you can also insert 3 backticks before and after your code, like so:

```
<p>visible</p>
```

the backtick is located above the tab key on your keyboard


#3

I am having this problem, too, but I don't know what the O.P. means by "should've put the text in tags". I've compared mine to the example earlier in the lesson and I can't find what's different. Thank you.