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
In this video, we’ll learn some of the basics of float layout.
Related Videos
Quick Reference
Floats are one of the most commonly used methods for laying out a page with CSS. When an element is floated, the element is taken out of the normal flow of the page and placed along the left or right side of its container.
The following will float an element over to the right side of its container:
.tips {
float: right;
}
The following will place the element along the left side of its container:
.tips {
float: left;
}
Knowing how to position elements on a page
to build layouts is just as
0:00
important as understanding the box model
components.
0:04
So here, we're gonna learn some of the
basics of float positioning.
0:07
Now floats are one of the most commonly
used methods for
0:11
laying out a page with CSS.
0:14
When an element is floated the element is
taken out of the normal flow of
0:16
the page and placed along the left or
right side of its container.
0:21
Depending on the float value we set and
0:26
that causes other elements to wrap around
it.
0:28
So back in our index.html file.
0:32
The secondary content div on line 29
contains two nested divs and
0:35
each of them contain an image, an h3
element, a paragraph, and a list.
0:43
Now currently if we take a look at our
layout,
0:50
we'll see how the two divs appear stacked.
0:52
So what we're gonna do is display the two
divs as columns.
0:57
So they're gonna be laid out side by side
in one row and
1:00
we're gonna do that using floats.
1:03
So first let's go back to our HTML file
and give each of the two divs a class.
1:06
So, we're gonna scroll down to the div on
line 30 and
1:12
let's give this div a class of resorts.
1:17
Next, let's scroll down to line 43,
1:23
and we're gonna give the second div the
class, tips.
1:25
All right, so let's save our index.html
file and
1:34
let's go back over to our style sheet.
1:37
And what we're going to do first is add a
new comment section at the bottom of
1:39
our page that indicates where we're
writing our float.
1:43
So let's copy Layout Styles content here,
online 109.
1:46
And let's scroll down here right below the
arrow rule.
1:53
I'm going to paste that comment and
1:56
I'm going to change the comment to read
floated columns.
1:59
And don't worry about this section here
just yet
2:08
we're gonna get to that in just a bit.
2:10
So what we're gonna do first is target
both the resorts and
2:13
tips columns and give them a width.
2:17
So right under the floated columns comment
let's first target the resorts class.
2:19
And I'll add a comma and we're also gonna
target the tips class.
2:26
And let's give these columns a width.
2:33
And we're gonna make the width value,
46.5%.
2:36
So now we save our stylesheet, and refresh
the the page,
2:41
we can see how each of the two divs takes
up 46% of the parent container.
2:46
So now we're ready to lay them out side by
side by floating them.
2:53
So, as I mentioned earlier, floats remove
elements from the normal flow of the page.
2:59
And as we saw earlier, in the normal flow
of our page, the divs are stacked on
3:04
top of each other vertically, since they
are block level elements.
3:09
So if we go back to our stylesheet and
right below the resorts and tips rule.
3:14
If we target the tips column.
3:20
Then we give it a float property.
3:25
And we make the float value the keyword,
right.
3:28
When we save our style sheet and refresh
the page, notice how
3:33
the div positions itself, or floats, over
to the right side of its container.
3:36
And we can actually tell that it's taken
out of the normal flow of the page,
3:41
since it's overlapping the footer content.
3:45
And we'll fix that in just a bit.
3:48
Now since the resorts div here above is
still in the normal flow of the page,
3:52
it's taking up an entire line of content.
3:58
And if we bring up the Chrome Dev tools
and inspect the div.
4:01
We can see how the remaining margin area
of the resorts div is what's taking up
4:08
the rest of the line.
4:13
So, now, if we go back to our style sheet,
and target that resorts column.
4:16
Then give it a float property, and this
time, we're gonna float it left.
4:25
Now when we save our style sheet and
refresh the page.
4:30
We can see how the resort div on the left
is now taken out of
4:33
the normal page flow and placed along the
left side of its container.
4:37
So now both columns are positioned on the
same line.
4:41
So now we're seeing a common issue that
happens when using floats.
4:47
Now if a block element contains floated
children, it's height will collapse.
4:51
So here, we can see how the secondary
content divs height has collapsed.
4:56
It doesn't expand to completely surround
the floated columns
5:02
because the browser does not account for
the height of the floated columns.
5:06
Remember, they're no longer positioned in
the normal flow of the page.
5:10
And on top of that,
5:13
the content of the footer is starting to
wrap around our columns.
5:14
So we need to fix this.
5:19
[BLANK_AUDIO]
5:20
You need to sign up for Treehouse in order to download course files.
Sign up