Float or Two: Displaying improplerly but allowing me to continue?


#1



https://www.codecademy.com/courses/web-beginner-en-6merh/2/3?curriculum_id=50579fb998b470000202dc8b


It allows me to pass both in Firefox and Chrome, but the text is displaying underneath the green box so it isn't readable? Is this a glitch in both Firefox and Chrome?


<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Result</title>
    </head>
    <body>
        <div></div>
        <p>Check it out! I'm a block of text, but the &lt;div&gt; and I can live in harmony. Boats on a sea, man. Boats on a sea.</p>
    </body>
</html>

div {
    height: 300px;
    width: 300px;
    border: 2px solid black;
    border-radius: 5px;
    background-color: #308014;
    float: right;
    /*Add your CSS here!*/
    
}

p {
    font-family: Verdana, sans-serif;
    font-size: 20px;
    width: 280px;
    float: left;
    /*Add your CSS here!*/
    
}


#2

It works correctly when I run it in both CodePen and in the Codecademy course. Does a scroll bar appear in the output?


#3

Ah! Yes it does. I assumed that it would just squish the text to fit.


#4

if you click full screen, you will see that the two elements float beside each other