-: 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 aside 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
spanning from one side to the other.
And the same down here for the footer,
right?
And you'll also notice 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, this aside
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, Flexbox or CSS Grid.
And so I'm doing that up here.
All right.
And we can also remove this color here again.
And so that's a lot better.
And so now let's get to work
in 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 you see I'm starting more and more
to use the VSCode autocomplete function
because at some point we know these properties by heart,
and then there's 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 aside.
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 side bar.
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.
Now 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 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 Flexbox.
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 fix 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 fix 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 a 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 in 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 built 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 Flexbox 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.