Email <p> won't stay in header


#1

I've successfully designed my email id but no matter what i try, it won't go inside the header div. It can go lower, to the left and right, but not any higher. Plus, when you scroll down (as I've set its parent div, the header, to position:fixed) the email p stays fixed.

Html:

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
	
	<div id="header">
	<h3 id="Name">Abdul El Saadi</h3>
	<a href="https://accounts.google.com/login"><p id="email">coolafiw@hotmail.com</p></a>
	</div>
	
	<div class="left"></div>
	
	<div class="right"></div>
	
	<div id="footer"></div>
	
	
	</body>
</html>

CSS:

div {
    border-radius: 5px;
}
#header {
    background-color: #9E2416;
    height: 60px;  
    width: 990px;
    position: fixed;
    z-index: 1;
    margin-top: -20px;
    margin-left: 10px;
}

.left {
    height:80%;
    background-color: #9F534A;
    width: 78px;
    float: left;
    margin-top: 50px;
    margin-bottom: 10px;
    margin-left: 10px;
}

.right {
    height:80%;
    width: 88%;
    background-color: #AB8D88;  
    float: right;
    margin-top: 50px;
    margin-bottom: 10px;
    margin-right: 10px;
}

#footer {
    height: 40px;
    width: 98%;
    background-color: #CB0E0E;
    clear: both;
    margin-top: 20px;
    margin-left: 10px;   
}

#Name {
    font-family: Verdana, Sans-Serif;
    color: #EEFAFC;
    padding: 5px 0px 0px 10px;
}

#email {
    font-family: Verdana, Sans-Serif;
    color: #EEFAFC;
    float: right;
    margin-right: 10px;
}

#2

That happens because the <h3> element you have for your name is a block element. Try putting display: inline; in your h3's CSS code. If that doesn't work, you can try adding margin-top: -Npx; to your CSS for your a element, where -N is a number of your choice. This will move it up.


#3

you need to float your h3 with id name to the left, otherwise it will take the fill length. Then your email will float nicely right

Also, you want your html and body have a height (for example 100%). For an element percentage height is the height of the parent multiplied by the percentage height (for example 88%) divided by 100.

In your case, body and html don't have height (they are 0), so your left and right will be 0 as well. Codecademy might forgive you for it. I put the code in jsbin, it won't. I put the html, body { height: 100% } in a comment, see the differences it makes

@jibblyj, i personally think float left and right is a better solution in this case, in particular because email already has float right


#4

I didn't think about floats! :stuck_out_tongue:
Good idea.