This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" 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
Besides wrapping text around images, you can use floats to create entire web layouts. For example, you can float the links in a navigation, or content columns in a container.
Resources
Video review
- With floats, we don't have to worry about the the extra whitespace that can appear when using inline or inline-block display.
- Floated elements will sit adjacent to each other regardless of the HTML whitespace between them.
- If a block-level element contains floated elements, its height collapses.
Related videos
Besides the simple example of
wrapping text around images,
0:00
you can use floats to
create entire web layouts.
0:04
For example, you can float the logo and
navigation in the header,
0:07
the content columns in a container,
or links in a footer.
0:11
As we learned in the previous video,
by default,
0:15
browsers display content in the order
that it's encountered in the markup.
0:18
But we can manipulate
that order with floats.
0:22
Currently, the elements in the header
are in the normal document float.
0:26
The site name and
0:30
navigation are stacked on top of each
other as they appear in the markup.
0:31
In this lesson,
I'm going to lay out the name and
0:39
navigation we used in the previous
section using the float method.
0:41
That way you'll have a better
understanding of how float layout works
0:45
compared to the inline and inline block
methods you learned about earlier.
0:49
First, I want to place the site's name
element over to the left of the header.
0:53
So, back in my stylesheet,
inside the media query,
1:00
I'll create a new rule that
targets the class name.
1:03
Inside the rule I'll add a float
property and set the value to left.
1:13
When I go back and refresh the page,
1:20
you can see how the element floats
to the left side of the header.
1:22
Notice how the navigation no longer
honors the space the name element
1:27
used to take up on the page.
1:32
If I inspect the name element
with the Chrome developer tools,
1:34
notice how the element appears to
be inside the main navigation.
1:37
Similar to what happened in the previous
video when I floated the image
1:41
next to the paragraphs.
1:45
And its width no longer
takes up an entire line.
1:46
Now it's only as wide as its content.
1:49
Remember, the floated element is
technically a block-level element.
1:51
But it's behaving like an inline element,
and
1:56
any surrounding content flows around it.
1:58
You can also put several
floats on the same line.
2:01
So to adjust this layout, I'm going to
apply a float to the main nav element.
2:04
I wanna place the navigation on
the right side of the header.
2:09
Back in my stylesheet, inside the media
query and right above the name rule,
2:15
I'm going to create a new rule
that targets the class name nav.
2:21
I'll give it a float property and
set the value to right.
2:28
When I go back and refresh the page,
we can see that both the name and
2:33
main nav element are now on the same line.
2:38
But the navigation items
are still on separate lines.
2:42
To display a horizontal navigation,
2:47
I'm going to float the list
items inside main-nav.
2:48
So back in my CSS, right below
the main-nav rule I'll create a new rule
2:52
that targets the li
elements inside main-nav.
2:57
Then I'll float them left by typing float:
3:02
left; So now the navigation
3:07
items are floated next to each other in
the same order they appear in the markup.
3:12
Now notice what happens if I
float the navigation items right.
3:18
So I'll go back to
the main nav li rule and
3:22
change the float value from left to right.
3:25
Floating the list items right reverses
the order of the navigation links,
3:32
because it pushes the very first list item
to the right side of its ul container.
3:36
Then the other items float next
to it in the order written.
3:42
I'll go ahead and
keep my navs floated left moving forward.
3:46
So I'll just undo that and
change the float value back to left.
3:49
With floats, we don't have to worry about
the extra white space that can appear
3:55
when using inline or inline block display.
3:59
Floated elements will sit
adjacent to each other
4:02
regardless of the HTML
white space between them.
4:05
Now, I want some separation between each
nav item, so I'll go back to my stylesheet
4:08
and apply a left margin to
the list items inside main-nav.
4:13
So below the float declaration,
4:18
I'll add a margin-left property and
set the value to 12 pixels.
4:20
The floats inside the header caused a
common undesirable layout behavior you'll
4:30
likely face when using floats.
4:34
If a block level element contains
floated element, its height collapses.
4:37
Notice how the header's height collapsed.
4:43
So its height doesn't fully expand
to contain the floated site name and
4:46
navigation elements.
4:50
Now this isn't a browser bug.
4:52
It's just how floats are supposed to work
in the browser, but this is a good example
4:54
of where you can get into trouble
when using floated elements.
4:58
In the next video, I'll show you why
this happens in float layouts and
5:01
how to prevent it from happening.
5:05
You need to sign up for Treehouse in order to download course files.
Sign up