curriculum/challenges/en/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.en.md

---
id: 587d78a3367417b2b2512ace
title: Push Elements Left or Right with the float Property
challengeType: 0
videoUrl: 'https://scrimba.com/c/c2MDqu2'
---

## Description
<section id='description'>
The next positioning tool does not actually use <code>position</code>, but sets the <code>float</code> property of an element. Floating elements are removed from the normal flow of a document and pushed to either the <code>left</code> or <code>right</code> of their containing parent element. It's commonly used with the <code>width</code> property to specify how much horizontal space the floated element requires.
</section>

## Instructions
<section id='instructions'>
The given markup would work well as a two-column layout, with the <code>section</code> and <code>aside</code> elements next to each other. Give the <code>#left</code> item a <code>float</code> of <code>left</code> and the <code>#right</code> item a <code>float</code> of <code>right</code>.
</section>

## Tests
<section id='tests'>

```yml
- text: The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.
  testString: 'assert($(''#left'').css(''float'') == ''left'', ''The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.'');'
- text: The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.
  testString: 'assert($(''#right'').css(''float'') == ''right'', ''The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.'');'

```

</section>

## Challenge Seed
<section id='challengeSeed'>

<div id='html-seed'>

```html
<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>
```

</div>


</section>

## Solution
<section id='solution'>

```js
// solution required
```
</section>
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`---`
			`id: 587d78a3367417b2b2512ace`
			`title: Push Elements Left or Right with the float Property`
			`challengeType: 0`
			`videoUrl: 'https://scrimba.com/c/c2MDqu2'`
			`---`

			`## Description`
			`<section id='description'>`
			`The next positioning tool does not actually use <code>position</code>, but sets the <code>float</code> property of an element. Floating elements are removed from the normal flow of a document and pushed to either the <code>left</code> or <code>right</code> of their containing parent element. It's commonly used with the <code>width</code> property to specify how much horizontal space the floated element requires.`
			`</section>`

			`## Instructions`
			`<section id='instructions'>`
			`The given markup would work well as a two-column layout, with the <code>section</code> and <code>aside</code> elements next to each other. Give the <code>#left</code> item a <code>float</code> of <code>left</code> and the <code>#right</code> item a <code>float</code> of <code>right</code>.`
			`</section>`

			`## Tests`
			`<section id='tests'>`

			```yml
			`- text: The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.`
fix(challenge-md): Fix file names and preserve challenge order in meta.json 2018-10-02 15:02:53 +01:00			`testString: 'assert($(''#left'').css(''float'') == ''left'', ''The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.'');'`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`- text: The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.`
fix(challenge-md): Fix file names and preserve challenge order in meta.json 2018-10-02 15:02:53 +01:00			`testString: 'assert($(''#right'').css(''float'') == ''right'', ''The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.'');'`
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00
			```

			`</section>`

			`## Challenge Seed`
			`<section id='challengeSeed'>`

			`<div id='html-seed'>`

			```html
			`<head>`
			`<style>`
			`#left {`
fix(challenge-md): Fix file names and preserve challenge order in meta.json 2018-10-02 15:02:53 +01:00
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`width: 50%;`
			`}`
			`#right {`
fix(challenge-md): Fix file names and preserve challenge order in meta.json 2018-10-02 15:02:53 +01:00
feat(challenge-md): Add initial markdown challenge files 2018-09-30 23:01:58 +01:00			`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>`
			```

			`</div>`



			`</section>`

			`## Solution`
			`<section id='solution'>`

			```js
			`// solution required`
			```
			`</section>`