Instructor: Now, before we can actually build
a float layout, first, we need to understand
how the float property actually works.
So that is going to be the goal of this lecture.
So in this section,
we will keeping working on our blog post page
from The Code Magazine.
And we will use each of the three methods
of building layouts to create a layout like this.
So at this point, you see that the header here,
which has the heading and the navigation
now occupies basically the entire page
from left to right.
We have the heading and navigation side by side,
and then here below,
we actually have now these related posts as a sidebar.
So we have this content here on the left side
and the sidebar on the right side
both below this complete header.
And then down here in the end,
we have this footer,
which again goes from left to right.
Now, here it has this weird color
but we're gonna fix that, of course, later.
But what matters is that this is the kind
of very simple layout
that we will build using float layouts,
flexbox and CSS grid.
Okay?
But for now, in order to get started with this section,
I will create new starter files here on my desktop.
So since we are building on the previous section,
I will simply go ahead and copy this folder
and basically duplicate it here.
And we'll then rename it to CSS-Layouts.
But once again, just like in the previous section,
you actually don't need to do this if you don't want.
So if you want, you can simply keep working
in the same files,
so in the same project folder
that you have been using up until this point.
So that's no problem.
I'm just doing this so that later in the end,
I have it all nicely organized
so I can provide you with the final
and initial files for each of the sections.
Okay.
But anyway, let's go back to Visual Studio Code.
And then here I like to right click
to create a new window.
Then Open Folder
on the desktop.
This is the one that I want.
Okay?
And in the meantime, actually my VS Code has updated
so it now looks a little bit different.
But that is, of course, not important.
So what matters here is that our files
are exactly as we left them before.
So let's open up the relevant ones, close the sidebar
and then let's go back to our live connection.
So I click again on Go Live,
and so here is that page back.
So again, this is exactly how we left it before
and so this is going to be the starting point for now.
Okay.
So let's go here to the very bottom of our page.
So here we are now starting to learn about floats.
So I will create like a small section here in our CSS.
And in order to actually start learning about floats,
let's look here at this piece of our page.
So what if we actually wanted these two elements here
to appear side by side.
So right now, they are not side by side
because remember that this here is a paragraph element,
which is by default a block level element.
And so therefore, it occupies its own line.
So it created a line break before and after its element.
Now, we could fix that by making this paragraph an inline
or an inline block element
but let's now actually explore another way,
which is using floats.
So let's give each of these two here a class name
in our HTML so that we can easily select them.
So this one actually already has the ID of author.
As I mentioned before, I prefer to always use classes.
And so I'm also giving it a class of author
and here the class of let's say author-img.
Okay?
And let's also add the style
or the selector for the author already.
Okay, and now let's use the float property.
And in this case, we are going to set it to left.
But here you can see a couple of different options
for float and mainly we can use left, right, or none.
So let's use left
and with this, what is going to happen
is that this image is basically going to be taken out
of the document flow
just like an absolutely positioned element.
Now, the difference here with floats
is that then all the other elements
will basically float around it.
So let's give it a save and see what happens.
And so here is the result of creating that flow.
So as I said, this element here is now basically flowing
around this one.
And if I added a lot more text,
then that would become even more visible.
Let's actually do that.
So here let's add some more text.
And there is a nice trick in VS Code,
which is if you start typing lorem,
so L-O-R-E-M, then you can hit Enter
and this will then basically create a bunch
of fake text, which we also call blind text.
So let's save that.
And so now it becomes even more visible
how this text now basically floats around this image here.
Right?
So this was just a test.
Let's put it back to what it was.
And now let's try to add some space here
between these elements.
So just so we see a little bit better
what float actually does
because now if we set
like a padding-left to move it,
let's say 10 pixels,
then nothing actually happened.
So let's inspect this.
And so you see here in this overlay,
so make it a bit more obvious.
So here we can very clearly see that the element itself
actually does not start right here where this text is
but it does, in fact, start right behind the image.
And so that's why adding like these 10 pixels of padding,
which is actually marked in green
if you look closely there on the left doesn't change a lot.
Well, it actually doesn't change anything.
So let's put a bit more here, like 50
and still, nothing changed
because the element is still behind the image.
So we would have to add a lot more.
Let's say like 80 pixels.
And only now it is finally enough
to start moving out behind that image.
So here we could again confirm
that this image has been taken completely out
of the pages flow.
It is as if the image isn't even on the page, right?
It does not really affect the surrounding elements.
Now, let's just before we continue,
add some padding on the top here as well.
Let's say 10 pixels.
All right.
And now let me show you how we can actually fix the fact
that this p element basically starts right at the beginning
of the container.
So behind the image.
So what we can do is to float this element as well.
So let's also float it on the left.
And so now let's check that out again.
And now the element starts right after the floated image.
All right?
So this all looks a bit weird probably
and it sounds a bit weird
but this is just how floats work.
Okay?
We could also set it to right here
and then it would move all the way to the right side
of the container.
So just like this.
But once again, we now actually have more modern ways
of doing all of this
and in particular, flexbox and CSS grid.
But still, I believe that it's important
that you get the basic knowledge about how floats work.
Okay, so let's put it back to left
and now here let's take this out
and let's simply add some margin to the left
because now that is going to be possible again.
Okay.
And so now this looks nicely laid out.
So it's as if this was a very,
very small component layout right here.
Now, in order to create some space here
between this image,
so basically this part here and the image,
how could we do that?
Well, let's try to add some margin bottom to this image
just to see what happens.
So margin-bottom of 20 pixels.
And so you see that a floated element is still able
to create some margins around it.
All right?
So actually here we should also use margin
and not padding
because what we want is basically space outside
of the element.
Let's just move this here down.
And in order to do that,
I actually used a nice shortcut
so that is here in Selection,
which is this one.
So Move Line Up or Move Line Down,
which in my case is Alt or Option + arrow key down.
So this is an extremely handy shortcut
that I actually use all the time
in order to move some code around.
So again, I can just hit Option + up or Option + down
to move it up and down like this.
All right?
So this the basic functionality of float,
which is kind of weird
but let's make it even weirder and now add some floats
to our elements here.
So to do this h1, and to this navigation here.
Now, we could do that in the elements
that we already selected.
So h1 here
and then here in the nav
but actually, let's select them again
because later on, I will then want
to get rid of this new code
when we leave floats behind.
Okay, and selecting these elements again and again
is, of course, not a problem.
So we can just select them multiple times
and then all of the properties will simply be applied.
So what I want to do here is have this float
to the left side.
And then the nav to the right side.
So the goal is basically to have them both on the same line
and have each of them float to one side
because that will then create an interesting phenomena
that I want to explain you.
So float: right.
And let's see what happens.
Well, this is not what I was expecting
because the nav is not all the way to the right.
So let's debug this here a little bit,
and oh well, in this case,
it's actually very simple.
Here it is not h2, of course,
so I was distracted.
It is instead nav.
Okay?
And now it's more on the right side
and if we open up...
Well, actually, it doesn't change anything for now.
But what matters is that this here
is now floated to the right side
and this one to the left side.
Now, the interesting thing that's happening
and that I wanted to show you
is if you notice this gray background here,
and maybe we can make it a bit more obvious,
so this header, let's change this here quickly to red,
and so now what we can see here
is that this element kind of lost its height.
So it looks very weird.
In fact, the only reason why it is still visible
is because we have some padding here.
So if we remove the padding,
then this element would disappear completely.
So at least the background color behind it.
So why is this happening?
Well, the reason is that all of its child elements,
which are in this case only two, right?
So the header only has two child elements:
the h1 and the nav,
and right now, all of them are floated.
This means that it's as if these elements
would not even be on the page.
So as if they had been removed.
And so now the element basically has no content anymore.
And so that way it makes sense
that its height is actually zero.
So again, the height is now as if it was zero.
The only remaining space
that is remaining is because of the padding,
and if we come down here to the box model, we can see that.
So the width is still 720
but the height is in indeed zero.
And it's only this padding of 20 pixels on both sides
that is still making this element visible.
But otherwise, the background color
would completely disappear.
So exactly what happens if we put this here,
the first one to zero.
Right?
So this phenomena is what we call the collapsing element
and when this happens,
we say that the element's height has collapsed.
And again, this did happen
because both of its children are now floated.
So it's as if they were not on the page anymore.
Now, of course, we do not want that, right?
So we still want this element here
to have the height that it had before.
We can actually fix that,
which is exactly what we will do in the next lecture.
But for now, just to finish,
let's quickly review how floats work
and compare them to absolute positioning.
Now, floats are actually not a positioning scheme
like absolute positioning
but they are still another way
in which elements can be out of flow.
And so it actually makes sense
to compare it with absolute positioning.
So we can achieve a floating element
by using float: left or float: right
just as we we learned before.
And as I was just saying,
when an element is floated,
it is removed out of the normal flow.
And so in this regard,
it is exactly the same as with absolute positioning.
Now, what's different about floats
is that floated elements do still have an impact
on surrounding elements.
So text and inline elements
will actually wrap around the floated element.
And so again, in this regard,
floated elements are completely different
from absolutely positioned elements,
which have no impact and are also not impacted
by any of the surrounding elements.
Finally, one important characteristic of floats
is that the container element
will simply not adjust its height
to the floated element.
And so this is exactly the reason why
in the last example that we just saw,
we saw that that container element collapsed its height.
Now right, so I hope this quick overview
and comparison will make it easier
for you to understand floats
and so in the next lecture,
as I was saying, we will now fix that problem
of collapsing heights.
So see you there soon.