Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
See an overview of the web page you'll lay out using floats.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey, everyone, Guil here.
0:04
It's time to practice the basics of
CSS floats, a commonly used method for
0:06
laying out parts of a webpage and
wrapping content around elements.
0:09
You're going to lay out portions
of this webpage using floats.
0:12
To get started,
launch the workspace with this video.
0:15
I have already included an HTML and
CSS file for this exercise.
0:18
And one of the style sheets linked to the
HTML already includes the base styles and
0:22
some of the layout styles for the page.
0:26
Now let's walk through
what you'll need to do.
0:28
In the file floats.css,
0:31
you'll see six comments with instructions
on the CSS styles you'll need to write.
0:34
So first, you'll apply a float
to li tags inside nav and you'll
0:38
need to make sure the floats follow other
HTML source order from left to right.
0:45
In HTML, the image inside the first
article has a class of img-featured.
0:49
So you're going to float this image,
so that content flows around
0:55
its left side, then to create visual
separation between the content and
1:00
image, apply a 15 pixel margin to the top,
bottom, and left sides of the image.
1:05
The next two images on the page
have a class of image article,
1:10
so you'll target those images and
float them so
1:16
that content flows along their right side,
then apply a 20 pixel right margin.
1:19
Next to the two bottom images, you'll
see a div with a class article content.
1:26
So, you'll float article content, so
1:31
that it's positioned on
the same line as img-article.
1:34
That also means that you'll need to adjust
the width of the article content div, so
1:37
that both elements can fit on
the same line side by side.
1:42
Now, at this point, you'll have
noticed that floating the images and
1:45
divs collapsed the height of
the parent article containers.
1:49
So, you'll use one of techniques
you learned to clear or
1:52
open up the collapsed space
around floated elements.
1:55
I've included this group utility
class to help you out with that.
1:58
And finally, you'll center align
the navigation inside the header.
2:02
I've posted resources that can help
you solve this part of the challenge
2:06
in the teacher's notes.
2:09
The goal is to get your page
layout to look like this.
2:10
This is a great way to practice
what you've learned so
2:14
far about CSS layout and floats.
2:16
Good luck, have fun, and in the next
video, I'll walk you through the solution.
2:19
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up