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



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>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <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>

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!*/


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


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


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