Build resume-email position in header


my email isn't positioned in the div header why?


Could you post your full html + css code? (so copy and paste your code to the forum


div {
    border-radius: 5px;
#header {
    width: 97%;
    height: 60px;
    background-color: #F0E68C;
    border: 2px solid black;
    z-index: 1;
    position: fixed;
#name {
    padding-left: 10px;
    font-family: serif;
    color: brown;
    font-size: 20px;
    margin-left: 10px;
    padding-top: 2px;

#email {
    font-family: cursive;
    float: right;
.left {
    width: 15%;
    height: 600px;
    background-color: #6495ED;
    margin-top: 80px;
    border: 2px solid black;
    margin-bottom: 20px;
    float: left;

.right {
    width: 84%;
    height: 600px;
    background-color: #A0522D;
    margin-top: 80px;
    border: 2px solid black;
    margin-bottom: 20px;
    float: right;

#footer { 
    width: 100%;
    height: 60px;
    background-color: #F0E68C;
    border: 2px solid  black;
    clear: both;


you need something else to post?? thank you


Your html code?
to make your code/indent is visible: (if you don't succeed, don't delete it, i can make it visible for you)

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:


the backtick is located above the tab key on your keyboard


my problem is with my domain name position. i upload an image if you saw it and you can easily see that my domain name is not in my header. so what i've done wrong?


But now i have to retype the html code from your image..., can you just provide me with the html code? I can see the email isn't in, but i need the code in order to resolve the problem, i can't use a inspector on a image


Okay, i just reconstructed your html, the link is not in because the paragraph element (#name, is a block level element) which takes the entire width, as you can see here, the link will be below it. You need to use float/display: inline-block to resolve this issue, depending on the desired output


<!DOCTYPE html>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
	     <div id="header">
	        <p id="name">your name</p>
	        <a href=""><p id="email">domain></p></a>
	     <div class="left"></div>
	     <div class="right">
	         <h2>About me</h2>
	            <li class="square">Objective</li>
	                <p class="circle">To take a position as a software engineer.</p>
	            <li class="square">Experience</li>
	                     <li class="circle">Junior Developer, Software Company (2010 - Present)</li>
	                     <li class="circle">Designed and implemented end-user features for Flagship Product
Wrote third-party JavaScript and Ruby libraries
	            <li class="square">Skills</li>
	                       <li class="circle">Languages: C#, JavaScript, Python, Ruby
	                        <li class="circle">Frameworks: .NET, Node.js, Django, Ruby on Rails</li>
	            <li class="square">Educatiom</li>
	                <p class="circle">BS, Economics, My University</p>
	     <div id="footer"></div>


Thank you, but point still stands, your #name should have a float: left; property.


ok thank you a lot,
i put in #name{ display:inline-block} and the problem is resolved,..