My div somehow disappears and won't let me float it even though the float code is right

#1

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

I keep getting the "Oops, did you remember to float .left to the left?" even though I did, and checked 30 times if it is right. The issue is that my div with a class of .left stops showing up on the rigth screen where we see the result for some reason. It disappears in the exercise before this one, but does not give me any "error" message because of that, it just disappears when I hit "Run". Can anyone help? Also, that div's font changes itself from Papyrus to Impact in CSS section on its own, for some reason. The other div are in Papyrus font and they are fine...


#2

We will need to see your CSS. It's assumed your HTML looks like this?

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title></title>
    </head>
    <body>
        <div id="header"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div id="footer"></div>
    </body>
</html>
#3 


<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
	<div id="header">Thea Scamander
	</div>
	<div class="left">Web Developer
	</div>
	<div class="right">Translator
	</div>
	<div id="footer">Writer
	</div></body>
</html>

This is my code, and yes, I just checked it again, but putting mine here just in case I somehow missed something..

#4

We need to see your CSS, please.

Note that this lesson does not ask us to populate the markup, only create the empty elements with no text.

#5 

* div {border: 5px solid black;
    border-radius: 5px solid black;
    height: 50px;
    width: 200px;
    background-color: brown;
}
#header {font-family: Papyrus;
position: fixed;
z-index: 1;
}
}
.left {font-family: Papyrus;
font-weight: bold;
float: left;
}
.right {font-family: Papyrus;
color: purple;
float: right;
}
#footer {font-family: Papyrus;
color: red;
}
#header:hover {
    color:red;
}

Here it is.I will try to delete the text then, too.

#6

I just tried deleting the text, does not help either. Sigh.

#7

Remove the universal selector from this rule.

Remove all font-family properties. They are not expected, yet.

.Your stylle sheet doesn't look very much like mine. Perhaps go back to the beginning and review the insturctions in the first four lessons..

#8

Thank you, I will try.

#9

the problem is that (due to position: fixed and float: left) the left will go below the header. But we will talk about that in a minute, first this:

#header {font-family: Papyrus;
position: fixed;
z-index: 1;
}
}

two closing curly brackets (})? that is dangerous, remove one of the two

Now, your left and right are behind your header, you can just push them down:

.left, .right { margin-top: 50px; }
#10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.