Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice CSS Floats!
You have completed Practice CSS Floats!
Preview
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