WDI Fundamentals Unit 6
This is the final part of our ELK Web Design site! Here, we'll become more familiar with positioning elements and images using floats. Remember, floats pull whatever element they're applied to out of the normal document flow. They're your secret weapon for positioning HTML elements on a page!
If you don't see the JS Bin below, please refresh the page.
Here's the editor you should use to write your code:
1) Write a rule for
div that includes a
div to stretch across
50% of the screen's
2) Set both
divs to display as
3) Remember that both of our
divs have a class attribute: "about" and "services". Create CSS rules for
At this point, you'll notice a few problems with our page:
6) Let's start with the quickest fix. Give the footer a
clear value of
7) Now the footer is in the right place, but the two columns are still too close together! What do you know about adding white space between HTML elements? Currently, each of our
divs take up
50% of the page
width. Consider this math: We want to borrow from the page's
width to add a
padding on all four sides, so that each
div keeps a total
50%. So, go ahead and change the
46% and add a
8) Now, let's box up and position the four listed services in the right-hand column.
lirule, and give it a
li to have an
outline value of
3px solid #222222.
10) Set the
lis to have a
Well done! The basics of the multi-column layout are all laid out. Now we can add a few visual elements to finish the design.
12) Switch to your HTML and wrap a new
div around the main image. Give it a class called "hero".
What happened to our image? The "hero"
div is adhering to the styles written in the
div selector, which we only wanted for our columns. Let's prevent that from happening.
13) You can overwrite the styles set in the
div selector by setting new styles us the "hero" class. Set
.hero to a
block, and a
14) In your HTML, wrap a section around both
divs; open it after the
header closing tag, and close it before the opening
15) Create a CSS rule for the
section. Set its
#222222 and make its
white. Set the
16) Set the
color to pale yellow:
#fffebb as well.
17). Set the
black and its
Bravo! Well done.
Here's what your design should now look like: