Having trouble in putting email address in the header


#1

hi everyone, I am having trouble in putting email address in the top header,below is my html and css codes, thank you for your help

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
	
	<div id="header">
	<p id="name">Name</p>
	<a href="mailto:email@msn.com"><p id="email">email@msn.com</p></a>
	</div>
	
	<div class="left"></div>
	
	<div class="right">
	<p id="intro">A steadfast and persistent graduate who possesses solid fundamental knowledge in mechanical engineering;</p>
	<h4>EDUCATION</h4>
	<P>B.E., Mechanical Engineering</P>
	<h4>EXPERIENCE</h4>
	<p>CNC Vertical Milling Center Operator</p>
	<ul>
	    <li>Learned and wrote G-code to do tapping for engine exhaust pipe.</li>
	</ul>
	
	</div>
	
	<div id="footer"></div>
	
	</body>
</html>

#header {
    z-index: 1;
    position: fixed;
    height: 60px;
    width: 98%;
    background-color: #BAA26B;
    
    
}

#name {
    font-size: 20px;
    font-family: Arial;
}

#email {
    font-size: 20px;
    float: right;
    padding: 5px;
}

.left {
    height: 500px;
    width: 10%;
    background-color: #8EC17E;
    float: left;
    margin-top: 70px;
}

.right {
    height: 500px;
    width: 88%;
    background-color: #FFA466;
    float: right;
    margin-top: 70px;
}

#intro {
    font-family: Arial;
    font-weight: bold;
}


#footer {
	position: relative;
	height: 50px;
	background-color: #668284;
	clear: both;
	margin-top:10px;
}


#2

What stetim94 said
:arrow_down:


#3

your name: <p id="name">Name</p> doesn't float left, so it will take the entire width of your header. Which means there is no room for your mail, so that gets pushed down


#4

Wow, what a big mistake...

thank you for pointing out, will be more careful next time