Original subtitles

(Jonas) Now that we have a basic knowledge of how floats

and clearing floats works,

let's build a simple layout for our page.

And so what we're looking for is this.

So again, here we have, or,

a site finally as a sidebar here on the right side

and our main content on the left side.

Then we still have the header on the top

spending from one side to the other

and the same down here for the footer.

All right.

And you also noticed that the container is now a lot larger.

So we will do all of that,

but let's identify the main parts of our layout.

So that's the header here,

which we already have nicely in place here.

Then it is this article,

just a site and the footer down here.

Right?

So let's start by selecting those elements

here in our code again.

And so I will select them here again

for the same reasons as I explained before,

which is because later on,

I will want to delete this code or to deactivate it.

And then it wouldn't be good to have these properties

in the selectors that we already have up there.

So,

selecting the article,

the aside,

and the footer.

And the header is not really necessary

because we already have a lot of work done on it.

Okay.

Now here let's quickly get rid of this comment.

And now the first thing I'm actually going to do is to work

on the container and in particular,

to make it 1200 pixels wide.

And this will be the same for all the layouts.

So no matter if billing it with float, Flex box or CSS grid.

And so I'm doing that up here.

All right.

And we can also remove this color here again.

That's, that's a lot better.

And so now let's get to work

and basically putting this article here on the left side

and the aside on the right side.

And to visualize this a little bit better,

whenever I do something like this,

I always give these elements some background color

to make it easier to see the boxes on our page.

So background color like this.

And do you see, I'm starting more and more

to use DVS code auto complete function,

because at some point we know these properties by heart,

and then there is not really a need

to keep writing them by hand.

So the colors here don't really matter.

Just so we can actually see what is happening.

And so now let's get to work.

So we already know how float works,

so this shouldn't be too hard.

However, before using floats,

we actually need to change the width of these two elements

that we want to be side by side.

So article and the site.

So right now, each of them, since they are block elements,

occupy 100% of the available width of the container, right?

And so again, if we want them to be side by side,

each of them needs to have a certain width.

So our container is 1200 pixels wide.

And so, let's divide that up for the article and the aside.

So I'm going to give the article

a width of 900 of those pixels,

and the remaining 300, go to the sidebar.

So to this aside.

And so 900 plus 300 are exactly the 1200 of the container.

Right?

So that looks like this.

And now all there's left to do is to put them side by side.

So float, left,

and then here float right.

And actually here we could use both.

Okay.

And here you go.

Now they are nicely side-by-side but now notice

what happened here with the footer.

So the footer is now floating around

these two elements as well,

because, well, that is exactly what the float property does.

It makes it so that the elements that come after it,

will float around that first element.

So here we have a first, this article, then the aside,

and afterwards comes the footer.

And so if we set the aside to float,

then the element that comes after it will float around it.

Okay.

So that's just how floats work,

which are again, quite confusing.

And that is exactly the reason why later on,

we will replace floats with CSS grid and Flex box.

But anyway, if we want this footer here

to be back down where we want it to be down here,

then we need to clear the float.

Okay.

However, in this situation,

actually, we don't need to create any new empty diff

or we don't need to use the clear fixed class

because we already have that element

on which we want to clear the float.

Right.

Which is exactly the footer.

Okay.

So again, we needed to create an empty diff before,

or to use the clear fixed class,

because there was simply no other element

on which we could clear the floats, but now there is.

So it is this next element,

which we do not want to float around the other ones.

Okay.

So let's simply say clear both.

So usually don't bother with clear left, or right.

If you say both,

then it's just going to work no matter what.

And so now you see it's gone and it is back down here

where it actually belongs.

Okay.

Now just quickly about what I said that in this situation,

it doesn't really matter if we used float right or left

on the aside.

And the reason for that

is that there is no empty space between them anyway.

So in this case, it doesn't matter.

But actually let's create some space between them.

And in this case,

using margin or padding is probably not the best approach.

So instead, what I will do

is to simply decrease the size of this article element here,

and so that will then essentially create a gap

between the both of these elements.

So let's decrease this by 75 pixels.

So it will then end up with just 825.

And so now there appears this gap

because this element is floated to the left

and this to the right.

And so then of course, if we have some remaining space,

it will simply stay here in the middle of the two.

Now, if we set this one to left now with this situation,

that would not be ideal

because now the empty space would then be here

on the right side.

So let's put it back

and we can also get rid of the background colors.

And with that, we actually finished the layout already.

So this is already exactly what it looks like

in the demo version.

Right?

Great!

So this is how we build a very simple float layout

using floats, as I was just saying.

Now, again,

these are a bit hard to understand and to work with,

and that's why the people who work on CSS

came up with these modern solutions,

such as Flex box and CSS grid.

And we will talk about them very soon,

but for now we need to quickly learn about something else,

which is to finally change the box model

from the default behavior

to something that makes more sense.

So let's do that in the next video.