Original subtitles

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 keep 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 side bar 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 to.

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 blog 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 gloats.

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 this dial

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,

let's 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, actually, it 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 page's 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 big 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 is 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 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 it 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,

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 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 elements

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.

And 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 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.