Push Elements Left or Right with the float Property

scrimba

Watch in fullscreen

by freeCodeCamp

About

Comments

Notes

Push Elements Left or Right with the float Property

by freeCodeCamp

Expand for more info

index.html

run

preview

console

<head>
  <style>
  #left {
    
    width: 50%;
  }
  #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>

<head>

<style>

#left {

width: 50%;

}

#right {

width: 40%;

}

aside, section {

padding: 2px;

background-color: #ccc;

}

</style>

</head>

<body>

<h1>Welcome!</h1>

</header>

<h2>Content</h2>

<p>Good stuff</p>

</section>

<h2>Sidebar</h2>

<p>Links</p>

</aside>

</body>

-0:46