Help me with these. I thought I got the right answer

HTML-CSS
1

Tell us what’s happening:

Your code so far


<head>
  <style>
  #left {float:left;}
    
    width: 50%;
  }
  #right {float:right;}
    
    width: 40%;
  }
  aside, section {
    padding: 2px;
    background-color: #ccc;
  }
  </style>
</head>
<body>
  <header>
    <h1>Welcome!</h1>
  </header>
  <section id="left">
    <h2>Content</h2>
    <p>Good stuff</p>
  </section>
  <aside id="right">
    <h2>Sidebar</h2>
    <p>Links</p>
  </aside>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 6.0; A1601 Build/MRA58K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.68 Mobile Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property

Screenshot_2018-06-06-11-05-14-49
Screenshot_2018-06-06-11-05-14-49720×1280 92.5 KB

2

You have the right idea, you’re just inserting it wrong. (That’s what she said.)

You started with:

  #left {

    width: 50%;
  }

And you ended up with:

#left {float:left;}

    width: 50%;
  }

That float: left; should be at the same level as that width. Notice that you added a closing bracket after the float: left;. Count the number of opening brackets and closed brackets in the style section. Do you see the problem? And of course #right has the same problem.

Please let us know if this wasn’t a sufficient enough hint.

1 Like
3

Got it. Thank you. :slight_smile: