Help With Lesson 7 "Build a Resume"


#1



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


So, in my header, I made an id of "name" and I'm trying to get the font to the size I like, however if I go above 22px it throws everything off for some reason. At 22px all my div's and stuff are lined up correctly just how I want them, but as soon as I change the font size above 22px, the left and right div's get thrown around and sometimes the left one disappears off the screen. Same thing happens if I adjust the margin of "name". I can't figure out why it does this.

In my link below, adjust the header font to 20px and you will see the left and right align to the sides like I want. change the font to 24px and you will see how it all moves.


<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
	    <div id="header">
	        <p id="name"><strong>Stephen Duschl</strong></p>
	        <p id="email"><strong>Email: </strong><a href="www       .yahoo.com">sjd803@yahoo.com</a></p>
	        </div>
	    <div class="left"></div>
	    <div class="right"></div>
	    <div id="footer"></div>
	
	
	
	
	</body>
</html>


body{
    background-color: #FFF8DC;
}

#header{
    z-index: 1;
    position: relative;
    height: 60px;
    width: 99.5%;
    border-radius: 40px 40px 7px 7px;
    border: 2px solid black;
    background-color: #FF7F50;
}

#name{
    float: left;
    font-size: 20px;
    margin-left: 30px;
}

#email{
    float: right;
    padding-top: 20px;
    margin-right: 5px;
}

.left{
    height: 80%;
    width: 80px;
    float: left;
    border-radius: 10px;
    border: 2px solid black;
    background-color: ;
    margin-top: 5px;
    margin-left: -165px;

}

.right{
   
    height: 80%;
    width: 80px;
    float: right;
    border-radius: 10px;
    border: 2px solid black;
    background-color: ;
    margin: 5px 3px 5px;
    margin-right: -185px;
}

#footer{
    position: relative;
    margin-left: 0px;
    height: 60px;
    width: 99.5%;
    clear: both;
    background-color: #FF7F50;
    border-radius: 7px 7px 40px 40px;
    border: 2px solid black;
    
}


#2

this problems can only happen on small screens? the margin-left of your .left simply pushes the left out of the screen, what do you want to do about it?


#3

So, it's not the code it's just my computer screen? Why does changing the font of text in the header, affect something else though? That makes no sense to me, I don't understand why it would cause my other div's to move around.


#4

hold on, this doesn't make sense. I need to have another look. Give me a couple of minutes


#5

Ok. I'd also like to point out, that my negative margin-left and negative margin-right on my left/right div's, is just to counter act what happens when I change the "name" font.

I should be able to leave the margins at 0 and have them at the side of the screen, correct?


#6

the behavior of your left and right is strange, take a look at this, now the elements are left and right

What was the problem? You also floated elements left and right inside your header, they seem to conflict with the float of your .left and .right, which caused really strange behavior, my understanding of float isn't that good, but it seemed to cause the problem


#7

Hmm, well I'm still a big newb at this. What exactly do these bits of code do that you added?

html, body {
height: 100%;
}

.clear {
clear: both;
}

The issue, was anytime I changed the font size of the name, my div's would relocate to different spots. Your code seems to work fine, although I don't understand why, and why mine didn't.


#8

your .left and .right have a percentage height, which means they inherit from there parent. In codecademy the parents of .left and .right have a height, so it works fine, but outside codecademy this is very often not the case. You need this to give your left and right height

I added a div with class clear between your header and left inside your html code, which i used to clear the float of #name and #email so it wouldn't conflict with the float of .left and .right. Float is a incredible difficult thing to understand at a deep level


#9

Thanks, that makes sense.

I'd like to add that I set my header to a position of "fixed" and the other div's to "relative" and so far it seems to have helped my issue as well.


#10

i didn't even see that, using fixed will take the element out of flow, that will also help a lot. Maybe add some margin-top to your left and right so they are below the header?


#11

Yes I'll add margins. Thanks for the help