Margin between Header and Right Column


#1



https://www.codecademy.com/en/courses/web-beginner-en-9x6JW-WnAFv/0/7?curriculum_id=50579fb998b470000202dc8b


I have my header fixed, and it stays while I scroll up and down, but the problem is that the header overlaps over the right header, and I can't see the "Objective: To get a programming job" that should be on the right header. How do I fix this? Thank you in advance!


This is the html

<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Resume</title>
	</head>
	<body>
	    <!--This is my header-->
	    <div id="header">
	        <h1 id="name">Sae Hee</h1>
	        <h1 id="email">saehee@email.com</h1>
	    </div>
	    
	    <!--This is my left column-->
	    <div class="left"></div>
	    
	    <!--This is my right column-->
	    <div class="right">
	        <h3>Objective</h3>
	        <p>To get a programming job</p>
	    </div>
	    
	    <!--This is my footer-->
	    <div id="footer"></div>
	</body>
</html>

This is the CSS

#header{
    height:100px;
    width:99%;
    border:3px solid #7ac5cd;
    border-radius:5px;
    position:fixed;
    background-color:#7ac5cd;
    float:top;
    margin-bottom:10px;
    margin-right:10px;
    margin-top:-20px
}
#name{
    float:left;
}
#email{
    float:right;
}
.left{
    height:1000px;
    width:100px;
    border:3px solid #e9edf0;
    border-radius:5px;
    background-color:#e9edf0;
    margin-top:10px;
    margin-bottom:10px;
    margin-right;10px;
    float:left;
}
.right{
    height:1000px;
    width:91%;
    border:3px solid #cff6ff;
    border-radius:5px;
    background-color:#cff6ff;
    margin-top:10px;
    margin-bottom:10px;
    margin-left:10px;
    float:right;
}
#footer{
    height:100px;
    border:3px solid #5bcfbb;
    border-radius:5px;
    background-color:#5bcfbb;
    float:bottom;
    clear:both;
}


#2

please paste in all of your code, I cannot help with a portion. I need all your HTML & CSS


#3

I have edited my post.


#4

semi colon ^ instead of colon change this and see if it comes right :slight_smile:


#5

Pfft. I feel dumb for not noticing that. Thank you, but unfortunately fixing that didn't work.. :sweat: The header still overlaps the right column :sob:


#6

That's gone right to the bottom open your preview in full screen mode and scroll all the way down..

let me see if I can fix this


#7

I fixed the width of the right column to 90%, so the left and right were next to each other, and now the words are covered by the header again -- :sweat: I'm so bad at this XD


#8

no you're not, positioning is really tricky.

In the Make a Website course there's bootstrap doing all the positioning so that's much easier.
Your padding and margin's are making it a bit confusing.

This is what I would do: After making header 90% you need to push your header 100px from the left as your left sidebar is 100px, so use margin-left: 100px;

for right you need a margin-top:100px; (header height is 100px)
margin-left:100px; (left width is 100px)

Maybe remove all the padding and margin's and watch what moves and how it moves as you go along :slight_smile:


#9

Yay! I played around with the margins/heights of the left/right column, and I can sort of understand how they work now.. So thank you! :smiley:

However, making the left margin of the header to 100px did absolutely nothing >< (At least none that I could see). But because I can now see the stuff on the right column, I'm not minding that much.

So thank you so much, again!!


#10

np, you're welcome !
Happy learning :slight_smile:

If you want more practice with building websites be sure to do Make a Website course

Congratulations :tada::boom::eight_spoked_asterisk:on completing HTML & CSS :thumbsup:


#11

Thank you! :smiley:
And I will do that course (someday)!


#12