scrimba
Introduction to CSS
CSS Float Layout Challenge
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

CSS Float Layout Challenge
AboutCommentsNotes
CSS Float Layout Challenge
Expand for more info
style.css
run
preview
console
/* 
CHALLENGE
— Apply a percent width to CONTENT ID of 75 percent and set the NAVIGATION ID to a width 25 percent
- Apply a height of 400 pixels to the CONTENT & NAVIGATION IDs
— Apply a pixel height to the HEADER and FOOTER ID of 50 pixels
— Apply the proper float values to the content and navigation IDs so that the element with the ID of CONTENT is on the left, and the element with the ID of NAVIGATIO is on the right.
— Apply a clear property that clears all floated elements to the FOOTER ID.
*/

#header {
background: #44accf;
}
#content {
background: #b7d84b;
}
#navigation {
background: #e2a741;
}
#footer {
background: #ee3e64;
}
Console
index.html#
-2:01