2.1 KiB
2.1 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d78a3367417b2b2512ace | Push Elements Left or Right with the float Property | 0 | https://scrimba.com/c/c2MDqu2 |
Description
position
, but sets the float
property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left
or right
of their containing parent element. It's commonly used with the width
property to specify how much horizontal space the floated element requires.
Instructions
section
and aside
elements next to each other. Give the #left
item a float
of left
and the #right
item a float
of right
.
Tests
tests:
- 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>.");'
Challenge Seed
<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>
Solution
// solution required