Voiceover: Hello. Excited for a new lesson?
I hope so because this is going
to be a long one.
Now that we know how the box model works,
let's build a simple layout for
our blog page.
This is where all the fun begins.
We want a layout just like this one.
So we want a box with our main content,
the box for the author info and the
box to show what other blog posts
are on our blog.
We will start by putting all the
content we have so far inside a container
and center that container on the web page
like most of the websites you use every day do.
We will do that by using the div element,
which we have not talked about yet.
The div element is one of the most used elements.
Div stands for divide, and so we use it simply
to divide our page into sections by creating
boxes where we put our contents in.
So let's wrap all the content we have
so far inside a div element.
Starting right here.
Just write div.
Some space and I'll copy everything,
all the content we have so far,
I will cut it and paste it right here.
Now I need to indent this code by
using the tab key.
I will show you in a second.
So that the code looks much better.
And it's easier to read with these indents.
Html is the first level, that is the second level,
that's the third level, and everything
inside of the div is the fourth level.
And then third level, second level, first level.
So now let's call this div container.
So call it container.
And like I showed you before, we will
use Command E, this time with the cursor
on this class name.
Command E and then we will make
a new rule for this class.
So the class selector and the
name of the class container
and now we can write our styles
for this class.
First, I will define the width
of this and I will use 1140 pixels
as the width.
The standard width has been 960 pixels
for a long time but as screens start
getting larger and larger,
we can also make wider web pages.
So let me just make these windows bigger
so we can see what's happening here.
Now, we want this container to be centered
in the window, not all the way to the left.
So let's go back to brackets to do that.
And it's actually easier than it sounds.
In order to do that, we have to define
left and right margin of the container
to be auto.
Margin left, auto, and margin right, auto.
And the auto means that the left
and right margin are adjusted automatically
according to the context of the element,
which is the browser window in this case.
So let's see what happened.
So, like magic, the website is centered.
But even if I adjust the browser window,
our content always stays centered, you see?
Now let's go back and create those three boxes
that we saw earlier.
Again, we use the div element to do that.
Div, and I will call the first one "blog post".
So instead of copying all the content,
I'll just delete this closing tag
and put it where we want it to be.
And it's down here, you see?
Because here is the part where the author begins
and everything above it is the blog post.
And brackets automatically close that for us.
Now again, let's indent this code
so it's easier to read.
Just like this.
Now, below this, I'll create the container
for the other blog post which will
be the green blog post, if you remember it.
So div, class, other posts.
That's a great name for this, I think.
And I'll just put some dummy text here for now.
And finally, the box for the author.
We have class, author box.
We'll move this here.
Now, indent and code.
And save it, never forget to save.
So let's just give them different
background colors so we can see
on the web page what's going on.
Again, I will hit command E because
it's the easiest way instead of switching
back and forth between HTML and CSS files.
So in order to specify a background color,
it's very easy, just write background color
and then chose a color.
If you remember from our color lecture,
blue is...red 0, green 0 and blue ff.
Okay, let's close this post and now
the other posts. For this one and now,
again, background color.
This one is green so, it will be
0 for red, ff for green and 0 for blue.
If you put this cursor on this color
we can actually see it. Yeah, it's
green as we wanted.
And now the author box, we must
find a style for this one.
Background color, we want it yellow.
So it's ff for red, ff for green and 0 for blue.
So, yellow.
We'll close these ones and let's check
our web page again.
So blue is the first box, green is
the second box and yellow is the third box.
Now, I want the width of the actual blog post
to be 75 percent of the container and the
other blog posts sectioned to be 25 percent.
And that's very easy.
So the blog posts, we just need to say
width 75 percent, and the other posts
Command E, width, 25 percent.
So you see, we can not use only pixels
to define measures but also percentages
which will become very handy later on.
Now it's 75 percent and that's just 25 percent
here in the green box.
Now, to put the green box beside the blue box,
as we want it for our layout, we need to use
a new property called float.
And this is very important.
With float, an element can be pushed
to the left or to the right, allowing
other elements to wrap around it.
So if we define a float property
for the blue and for the green box as left,
the two boxes will be side by side.
So let's do that.
We'll start down here.
Float, left.
And the blue box also.
Float, left.
So let's see what this looks like.
Great, these two boxes are side by side now.
Now the problem is the yellow box is
also up here where we don't want it.
To avoid this, we have to use a clear property
which is like the counterpart to float.
I am actually going to do this in a very specific way.
So please just copy the CSS code
that I'm going to write here because
it's not important that you understand
it at this point.
I'll use a very usual clear fix class.
So write clear fix after.
Again, it's not important that you understand
what I'm writing here right now.
We'll just use this class and clear. Save.
So after the green box, let's just add
an empty div with a clear fix class.
This may look a little strange to you now
but don't worry.
We will see how to use this later.
Clear fix.
Okay now it should work.
Yeah, that's it.
Now, we see that the yellow class is down here
as we want it so we have these
two boxes side by side with the
float property, then we use the
clear property in the strange clear fix class
to clear the float so that this box
can be right under these two boxes.
Now, let's just add some margins and paddings.
You see, the blue box and the green box here
are way too close together so we
can add paddings to those boxes.
And I will just go back and
I will actually use a CSS file here again
so you can see all those class we created
inside the html file.
Brackets put those down here at the
end of the CSS document.
The container, the blog posts,
the other posts and the author box.
Now let's just add the padding
to the right side of the blog post.
If you remember padding, just like
a wide space inside the box.
We will just say padding right,
and say 30 pixels.
Okay, let's see.
You'll see this space here, but still
inside the box so it's still blue.
And that will give us a nice space
between those two boxes.
Now we should also put a little margin
between the top of the container
and the browser window.
So to give it a nice spacing between
the beginning of the browser window here
and the beginning of the content.
And that's easy, the easiest way may be
in the container element.
If we set margin top of the container
to let's say 20 pixels.
Then, we have this nice spacing
all the way up here.
Okay, now let's just get rid of those
ugly background colors.
We just use them so we could see the boxes
while we were working on them.
Now, maybe see here in the container
declaration block that we have these 3 margins.
Margin left, margin right and margin top.
There's actually a cleaner way of doing this.
I'll just show you how.
You can just write margin, then we specify
the four possible margins in
this shorthand property.
So this goes like the top margin is first,
we'll just write it here so you can see it,
it's top is the first, then the right,
then bottom, and then left.
So the top button, we want to be 20 pixels, right?
And the right is auto, the bottom is 0
because we don't have any margin at the bottom,
and left is auto again.
So this short declaration here does
the exact same thing as this.
Just remember it's margin top, right, bottom and left.
So I can just delete it and things look
exactly the same.
All the margins are still there and as you see,
the ugly background colors are also gone.
Another cool thing we can do is add like
a gray line here to separate the author box
from the two boxes above them.
So let's go back to the author box
and we'll use a border property.
This border property allows you
to do three things.
The border width, the line type and the color.
So just write border and top, because
we want it to be at the top of the box,
and then say 1 pixel width and
we want it to be solid so just
a normal solid line and then a nice gray color.
Remember how to do a gray color?
You just have to put the same value
on the three r, g and b channels.
Let's see 333.
And then with our color picker, Command E,
and we can just adjust it.
We can use another different gray.
So maybe this one here, I don't know.
Alright, save it.
And here we go, here we have this nice gray line.
And we probably also want some padding here,
so that all this content is not just glued
right to the top of this div element.
So let's also define some padding
at the top, let's say 20 pixels.
These numbers are not important
at this stage because we are just
trying out some things here.
Alright, so you see now we have
this nice padding here.
So alright, I think we are
pretty much done with our layout here.
So we used float and clear in order
to put all our layout boxes where we wanted them
and we used padding and margin to create
some distances between the boxes
and that's essentially all you need
in order to build some layouts.
So in the next lecture, we'll just
improve some things here on our website
in order to make it look a little bit better
and to teach you some more techniques
that you can use.
Alright, so see you there.