Push Elements Left or Right with the float Property

HTML-CSS
1

Tell us what’s happening:

Your code so far


<head>
  <style>
  #left  {
    section: left;
    aside: left;
    float: left;
    width: 50%;
  }
  #right {
    section: right;
    aside: 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 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

2

please stick to the instructions without adding additional code. The original code was:

 <style>
  #left {
    
    width: 50%;
  }
  #right {
    
    width: 40%;
  }

so you just need to add a float line to each section and then run the check.

3

i have done that but it is not working

4

ok reset your code (there is a reset code button you should use) then make sure your final result looks like this:

  #left {
    float: left;
    width: 50%;
  }
  #right {
    float: right;
    width: 40%;
  }
5

thanks let me try it

6

this the result i got: The element with id left should have a float value of left.
The element with id right should have a float value of right.

7

What browser are you using? It works best in Google Crome.

8

use google chrome but its not working

9

Repost your code in full. Use the code block tool to make sure it shows up properly for us. The code block tool is the small icon that looks like this </> in the domment menu.