- [Voiceover] Hi. This is Chris Converse
and in this episode,
we'll be exploring using CSS Float properties
to create a text wrap around a photo and caption,
as well as create a column layout within our web page.
Now if you'd like to follow along with me,
download the Exercise Files,
which includes a basic web layout
that we can all start from, and we'll begin
by opening the index.html file in a text editor.
Now inside of the html element,
inside of the body area,
we have a header and a main section.
Inside of this main section here
we have an article element,
and an aside element.
We also have some content that follows the aside.
We'll look at clearing the float later on.
And then inside of the article we have a figure element.
Now if you'd like to preview this page
you can open the index.html file up in a browser.
My particular text editor has a preview, so I'll use that.
And here we can see
that this page is basically a single column of content.
So the figure element in caption is this element right here.
And so the first thing we're going to do
is open up the CSS file
and assign a float property to the figure.
So let's go back to the exercise files,
let's find style.css,
let's open this up in our text editor.
And if we scroll down here I put a comment.
We're going to be editing all of the items
below this particular comment.
So let's start with the figure element here.
So let's add a rule.
So after the margin property let's hit a return.
Let's type "float, colon, space"
then we'll type in the word right, then a semicolon.
As soon as we do that,
we'll now see that the figure element,
as well as the image and figure caption inside,
are all now floating over to the right.
And what this does is allows the browser
to take the next element,
which in this case is this paragraph element,
and allow this to follow the item before it,
and the figure element now with it's float property
now moves out of the way.
And this is a very similar technique to using text wrap
inside a lot of page layout applications.
So let's come back to the figure element.
Instead of float right, let's change this to float left.
And now the figure element floats
to the left-hand side of the screen,
allowing the text to flow around the right-hand side.
So with this in place
let's come back and modify some properties.
So we have a margin property here.
We have a margin of 10 pixels on the top and bottom
and zero on the right and left.
Let's come in here and change these.
And for the first property, which is top,
we're going to set this to five pixels
just to move this down a little bit
to line up with the type.
Then a space.
For the right we're going to use 24 pixels.
For the bottom I'm going to set 12 pixels,
and for the left we'll set zero.
So now we can see we have some nice negative space
on the right-hand side of this element,
and some space underneath as well.
So if we resize the browser
we can sort of get a visual sense
of the padding we've added around this particular element.
Now to create some columns
we're going to add some float properties
to both the article and the aside elements.
So let's find the article here.
Let's hit a return.
First we're going to need to set a width property,
so we're going to set the width to 57%.
Then hit a return.
And then next we'll set a float property, so type float
and then we'll set this to left and a semicolon.
Now once we do that the layout's going to start
to look a little bit messy here.
What's happening is we have set the article width to 57%
with a float left, and now the other elements
are now floating up toward the right-hand side.
So don't worry yet because we need
to add float properties to the aside element
to correct this.
So let's come down to the aside.
Let's hit a return.
Let's set a width property here.
We're going to set this to 30%,
then a semicolon.
Next line, we're going to set a float property here
to left as well, so this will now float up
toward the left-hand side of the article element.
Now we'll see that the columns
are starting to work a little bit better.
So now let's come up
and change the margin properties for the aside.
Let's keep zero on the top, zero on the right.
Let's set zero on the bottom,
and for the left-hand margin, let's set 8%.
And so that 8% left margin is going to give us
a nice space between the left-hand side of the aside
and the right-hand side of the article element.
And now since the article element takes more vertical space
than the aside element, the next elements in the page,
which are the h2 and the paragraph element
for the types of pastry, are now still text wrapping
to the right-hand side of the article element.
So now what we need to do is use a clear property
on the h2 element to make sure
that it doesn't flow around any other elements.
So back in the CSS, let's scroll up.
Let's find the h2 property up here,
and let's come in here and add a clear.
And we're going to come down and set left, and a semicolon.
Now back in the preview I can scroll down
and now the h2 element will clear any floating items
to its left-hand side.
So this gives us a way to create columns in our layout
and then clear those columns based on additional content.
And so now that we have columns in our layout,
one thing we'll want to consider is removing the columns
for small screens since they'll be difficult to read.
So back in our CSS file, we scroll down,
I put in a media query here for the maximum width of 600.
So to clear the float properties,
all we need to do is simply set a float none.
So let's come up here and copy the article element.
So inside of the media query let's come down here
and paste the article rule.
First let's come in here and set a width to auto.
Then a space. Then we'll set the float property to none.
Let's duplicate that.
Let's change the second one to the aside.
We'll keep the width auto, we'll keep the float:none
and then a space.
And then if we scroll down we do have that margin left
that we'll want to get rid of.
So let's reset all of the margins for the aside.
So we'll set margin, space.
For the top and bottom we're going to set 35 pixels,
and for the right and left we'll set zero.
And so now if we scroll down this is what the aside
will look like on small screens,
anything under 600 pixels wide.
So if we resize the browser
this will be the large-screen view, with our columns,
and then the small-screen view
will clear the floats on article and aside,
and bring us back to a single-column layout.
Now if you'd like to learn more
about using the float property
to create even more advanced web layouts
for both on-screen and printing,
check out our course here in the library
called "Creating a Responsive Web Design."
And if you'd like to learn more
about emerging CSS technologies for building web layouts,
I'd recommend taking James Williamson's course
that takes a first look at CSS: Flexbox.
And so that concludes our brief look
at the CSS Float property.
And, as always, thanks for watching.