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
One of the easiest ways to use floats is with an image. Text will wrap around an image with the float property applied to it, like in a magazine layout.
Resources
Video review
- The
floatproperty accepts the valuesleft,right, andnone. - A floated element is technically a block-level element (it accepts any width, height, padding or margins values), but it behaves like an inline element because it doesn't exist on a line of its own, and surrounding content flows around it.
- If you’re ever curious about how your floated layout actually works, apply a dark border or background to the elements to see what’s going on behind the scenes.
Related videos
To follow along using
the latest workspace,
0:00
launch the workspace on this page.
0:02
One of the easiest ways to
use floats is with an image.
0:05
Text will wrap around an image with
a float property applied to it.
0:08
Like in a magazine layout.
0:12
So when I preview my latest workspace,
you can see that,
0:14
currently, the image is on its
own line above the paragraphs.
0:17
Now, I want this text below
the image to float next to and
0:22
around the image element.
0:27
To float an element right or
left, you use the float property,
0:29
which accepts three values,
left, right, or none.
0:33
Back in my work space,
I'll open up the style.css file, and
0:37
scroll all the way down
to the media query.
0:42
So in the featured image rule here,
0:45
I'm going to add a float property and
set the value to right.
0:48
So when I float the image right,
0:54
notice how the image is no
longer on its own line.
0:58
It's pushed to the right
edge of its container.
1:01
And the text in the adjacent
paragraphs flow down its left side,
1:04
taking up all the remaining
space in this line.
1:09
If I go back in my css and
change the float value from right
1:12
to left,
now the image gets pushed to the left
1:19
edge of its container and
text flows down its right side.
1:23
And if I resized the browser window and
make it narrower,
1:28
notice how the text refloats
itself around the image.
1:31
If you're ever curious about how your
floated layout actually works, apply
1:39
a dark border or background to the element
to see what's going on behind the scenes.
1:43
I wanna apply the border
to my paragraph elements.
1:47
So I'll go back to my style sheet and
create a new rule that targets the P
1:51
element, and then I'll give it
a solid one pixel red border.
1:55
So when I go back and
preview the layout in the browser,
2:02
notice how the image is actually
inside of the paragraphs box.
2:07
This is an example of how
a floated element is taken
2:11
out of the normal document flow.
2:14
When you float an element, like this image
here, it's technically a block level
2:16
element, because it accepts any width,
height, padding, or margin values.
2:21
But it behaves like an inline element,
because it doesn't exist on a line of it's
2:25
own, and surrounding content flows
around the floated elements.
2:30
Now, I wanna add some white space
between the text and the image, so
2:36
the text isn't touching the image.
2:41
Now, applying a margin to the paragraphs
will not create the desired white space.
2:43
For example,
if I go back to the P rule and
2:49
apply a 50 pixel left
margin to the paragraphs.
2:52
When I refresh the page, the image
is out of the normal document flow.
2:56
So the margin creates separation
only between the text and
3:00
the left side of its container.
3:04
And you can see that happening right here.
3:06
So, I'll go back to my style sheet and
remove the left margin.
3:09
So to create space around the image, so
3:14
that there's separation between
the text and the image.
3:16
I'll need to apply margins to the image.
3:20
Back in my featured image rule,
I'll add a margin top property and
3:24
set the value to five pixels.
3:29
Below that,
I'll add a margin right property and
3:32
I'll set the value to 25 pixels.
3:36
Then I'll add a margin bottom property and
set the value to 25 pixels.
3:39
Then I'll go ahead and remove the red
border applied to the paragraphs.
3:45
I'll save my style sheet and
refresh the page.
3:49
And now we're able to see that nice
separation between the image and the text.
3:52
So we have a five pixel margin on the top,
3:58
a 25 pixel margin on the right side and
25 pixel margin on the bottom,
4:01
which we'll be able to see when
we resize the browser window.
4:05
Nice.
4:14
And I can also create a little more
separation by applying a border and
4:16
padding to the image.
4:19
So for instance,
I'll go back to my style sheet.
4:20
And inside the feature image rule
I'll add a padding property and
4:23
set the value to 10 pixels,
and give it a solid 1
4:30
pixel light gray border
with the hex value d9e4ea.
4:35
Once I go back and refresh the page,
we can see the ten pixels
4:41
of padding on each side between
the border and the image.
4:44
You'll see this effect
used a lot in web design.
4:49
Images are one of the many uses for
the float property.
4:52
You can also build a horizontal navigation
or multi-column layouts with floats.
4:55
You'll learn more about those
starting in the next video.
5:00
You need to sign up for Treehouse in order to download course files.
Sign up