"Python Basics (2015)" was retired on June 22, 2018. You are now viewing the recommended replacement.
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 CSS Layout!
You have completed CSS Layout!
Preview
Let's use float for what it’s built to do: place content to the left or right side, and have other content wrap around it.
Further reading
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
Next up, we're going to discuss a CSS
positioning property called float.
0:00
If you studied the history of CSS,
0:07
you'd find that float has
a bit of a bad reputation.
0:09
This traces back to when the iPhone
was launched in 2007, and users could,
0:14
for the first time, experience
the web in full on a mobile device.
0:20
At the time, CSS didn't offer
any properties to help develop
0:27
responsive websites that remained
legible on a variety of screen
0:31
sizes because the need wasn't there.
0:36
So developers were forced to
come up with creative solutions,
0:40
many of which involved using the float
property to create responsive content,
0:44
even though it wasn't built to do that.
0:49
Nowadays, CSS includes
a number of ways to approach
0:54
responsive content,
including Flexbox and CSS Grid.
0:58
And you'll learn those in a future course.
1:04
In the meantime, we can return to
using float for what it's built to do,
1:07
place content to the left or right side
and have other content wrap around it.
1:12
Let's try out the float property.
1:19
In Diane's paragraphs
about the CSS box model,
1:22
she included an image from CSS
Tricks that we haven't styled.
1:26
Let's add a class to the image in case
we'd like to later apply the same
1:31
styles to other images.
1:36
Now, paragraphs have
a default value of block for
1:43
the display property, so the next
paragraph comes beneath the image.
1:46
But what if I wanted my text
to wrap around the image?
1:53
That's what floats are built to do.
1:56
We could use float right instead,
2:12
if we wanted our image placed on
the right rather than the left.
2:14
Now, our body copy touches the image,
which is not a good look.
2:21
Let's increase the margin on the right
side of our image, as well as the bottom,
2:26
in case any text wrapping around
the image comes too close.
2:32
Don't forget to think of
the margin shorthand like a clock,
2:43
that's 0 on the top, 1 rem on the right
and bottom and none on the left.
2:47
And since developers no longer rely on
the float property to create complex
2:52
responsive layouts, which is a relief
since it wasn't built to do that.
2:59
That covers the majority of what we
need to know about the float property.
3:06
I say the majority because sometimes
you might not like the look of what you
3:11
achieved.
3:16
You might be saying, it's great that
the first paragraph wraps up next to
3:17
the image, but I wish the second
paragraph would stay beneath it.
3:22
To force an element not to wrap
next to a floated element,
3:28
we use a CSS property called clear.
3:32
Let's create a class called .clear,
And apply the clear property.
3:36
The clear property accepts
values of left and right,
3:48
but I prefer to use the value both.
3:52
That way, it doesn't matter whether
the floated element is on the left or
3:55
the right, or even some of both,
our clear works either way.
4:00
Let's apply that new class to
4:05
the paragraph that shouldn't
wrap next to our image.
4:07
And there you have it.
4:18
Now, if you're a curious developer,
and I hope you are,
4:20
you might play around with
the element inspector and say,
4:24
this doesn't look so
great at certain viewport sizes.
4:29
Could we use CSS to
improve this experience?
4:34
The answer is yes, and we'll take
a look at how in the next stage.
4:38
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