This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
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
If a block element contains floated children, its height will collapse. In this video, we'll learn two methods for accommodating floated elements.
Related Videos
Quick Reference
So what we need to do next is open up or
0:00
clear the collapsed space around our
floated columns.
0:03
We want the float container to stretch up
and accommodate the floats.
0:07
And there are a few ways we can do that.
0:11
Now one of the ways we can prevent an
element from collapsing from floats is
0:14
applying an overflow property and setting
the value to hidden or auto.
0:18
So let's go back to our style sheet, and
0:23
let's target the secondary content
container under main styles.
0:26
And we're gonna add an overflow property.
0:32
And let's set the value to auto.
0:36
So now when we save our style sheet and
refresh the page,
0:39
notice how with overflow auto, the browser
is able to account for
0:44
the height of the floated columns and the
div is no longer collapsed.
0:48
And we know it's not collapsed because now
the second border is now at
0:53
the bottom where it's supposed to be.
0:56
So, this is a simple and effective way of
clearing floats.
0:59
But it isn't the most recommended solution
because the overflow property may
1:03
cause scroll bars to appear in certain
browsers, or certain parts of
1:07
the content area may get cut off,
depending on the overflow value we set.
1:11
But it's actually good enough to help us
out in a pinch, or for
1:15
use on smaller projects with simple
layouts.
1:19
In fact, it's totally fine to use this
method in our layout.
1:21
But we're going to go ahead and use one of
the best and most reliable methods for
1:25
clearing floats.
1:30
It's called the clearfix.
1:31
So let's go ahead and remove the overflow
auto from our secondary-content rule,
1:32
which, as you can see, once again
collapses our parent column.
1:38
So now let's go back to our style sheet,
and, at the bottom of our style sheet,
1:44
beneath our floated column rules, you
should see the new comment section,
1:47
labeled Float Clearfix.
1:53
Now, this may contain some CSS you might
not be familiar with yet.
1:55
But don't worry, all you really need to
know are two key parts.
1:59
So with this method, any time we need a
containing element cleared,
2:04
we simply need to give that element the
class group.
2:08
So since the div with the class
secondary-content here on
2:13
line 29 is the parent element of our two
floated columns,
2:17
we'll need to give this div the class
group, so right after the t-border class,
2:21
I'm going to add a space, then write the
class name group.
2:27
So now let's save our index.html file, and
when we go back to the browser and
2:32
hit refresh, notice how it forces the
secondary content div to contain our
2:37
columns without collapsing, so everything
looks great.
2:42
And you can use any class name you want
for this clearfix.
2:47
Now group is a common name, since we're
using it to contain or
2:51
group the elements within the parent.
2:55
So, what this clearfix does is, it
generates a blank
2:58
pseudo-element after the content of our
div, with the class group.
3:02
So we're actually able to generate content
from our CSS.
3:08
And we'll learn more about that in a later
course.
3:10
But the key to this clear fix is this
clear both declaration.
3:13
The value, both,
3:18
clears any collapsed space created by
floats on both sides of the container.
3:20
So, now what's handy about floats is that
we're able to sort of
3:26
change the order of our columns, without
having to change anything in our HTML.
3:30
So, if for some reason we need to reverse
the order of our two columns, for
3:34
instance, let's change the tips float to
left, and
3:38
the resorts float to right.
3:42
When we take a look at our layout once
again,
3:47
and refresh, notice how the order of our
columns is now reversed.
3:49
Again, check out our CSS layout techniques
course.
3:55
In that course, we go more in depth with
float layout and
3:58
we cover all the benefits of each layout
method.
4:01
You need to sign up for Treehouse in order to download course files.
Sign up