CSS Layout Tutorial - 05 - Adding the sidebar Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the fifth tutorial on CSS
layouts so we're continuing along from
the last video and we set up the main
content pane now we're going to add a
sidebar and we're going to float that to
the right and so the main content pane
and the sidebar will be next to each
other and so we'll have the classic two
column layout you probably have heard
that so let's go ahead and close this
out so first thing we're going to do is
we're going to update our index.html and
we're going to place this div right
below our main div so let's go ahead and
do that and we'll just come down here
and I've already typed this out so we'll
copy and paste this right here I will
copy and paste this by the way into the
message board in case you don't want to
type this out so there we go now we're
going to use a class the same thing we
did with the main content pane we're
going to use a class again and we're
going to call this side right I like to
call it side right you can call it
sidebar if you want but if you decide to
put a sidebar on the Left it's easier to
figure out in your CSS code which one
you're dealing with so we're going to go
ahead and call this side right we're
going to use a h2 heading instead of an
h1 it's a little bit smaller than an h1
because this will be a little bit of a
smaller window and then I put in some
sample content here and this is sort of
a fake history website we've been
working on so I was thinking well we
might have some lectures or something
let's say our website offered that now
let's go ahead and create the CSS code
for our side right so we'll just do a
copy and paste of this right here and of
course we will call this dot side right
and you will remember that the dot
stands for a class we're going to keep
the same background color as our main
and we're going to keep the margins at
10 pixels we're going to keep the border
radius at 5 pixels or even can you keep
the padding at 20 pixels oh it's very
similar but we're going to knock down
the font size percentage just by 5% so
this will be a hundred and five percent
and then we're going to use the float
parameter so we're going to float this
right and you'll remember in the last
CSS series we talked about that if you
do a float you must give the element a
width so that's what we're going to do
we're gonna give this a width of two
hundred and sixty pixels so that's a
little bit different than the main
content pane
on the side right we're only going to
allow this to be 260 pixels wide so
let's save everything here and let's
open up our web page actually before we
do that I made a couple rules for the h2
heading as well so I just copy and
pasted it right here and so we'll put
this font size at 120 percent and the
color as dark blue so let's go ahead and
save our stylesheet yet again and now
let's open up the web page and there you
can see we've got our sidebar but you'll
notice that they are not side by side so
we don't have our two column layout so
what is going on here well this is where
things start to get a little bit strange
with floating now you will remember that
we didn't put any width in our main
element so what's going to happen here
is the browser is going to paint the
header first then our nav bar and then
the main content pane and because we
didn't put it with here it's going to
size it to the entire length of the
browser so there's no room for our
sidebar now the other issue is that the
browser is always going to stretch this
all the way to the right so we have to
actually move this element in our HTML
code before the main element so that
this will get rendered first it will
float our sidebar over here and then
this element also then will fit the open
space because remember the side element
is not in the flow you will remember we
talked about the flow in the last CSS
series this is not in the flow so this
also will be side to side so let's go
ahead and do this now I actually don't
want you to do this right now so if
you're following along just stop and
watch this part because we're actually
going to move this back and I'll show
you why so we're going to go ahead and
move this above the main div so we'll
put it right up here we'll copy and
paste that and then we'll get rid of
this and again I don't want you to do
this right now we'll save this and we're
going to go ahead
and voila it worked but we've got
another problem
remember our side element isn't a float
so think of it like it's floating above
the page the browser is doing exactly
what it should do it's going to go ahead
and paint this main div still and this
since this is out of the flow it's just
going to float right above this but we
don't want that we want our little
gutter here of margin space that we
talked about in the last couple videos
so what we so the easiest way to do this
actually I like to do is to move this
back and then we'll have to make some
space and we'll talk about a couple
strategies that you can use so let's
close this out and let's go back and
copy and paste this here get rid of the
one up top here let's save this again
and it should be back to well somewhat
normal now there's a couple things we
can do first is we could set a fixed
length on our main pane but we don't
want to do that remember we want this to
stretch all the way if people resize our
browser we want this thing to stretch
right into our side element so we really
don't want to set a fixed length here
that kind of goes against the idea of a
liquid website so we still have to make
room and the way we're going to attack
this is we're going to use margins we're
going to set a merge in here and we're
going to push this margin all the way
over so we can fit our sidebar right
into here so let's do that we'll just
close this out and we'll go up to our
main and we've got to play around with
its margins now so let's get rid of this
margin here of 10 pixels and I've
already typed this out so I'll just copy
and paste it in here and so the margin
left is going to remain at 10 pixels but
the margin right is going to be 320
pixels and I'll explain why and then the
margin top and the margin bottom are
going to be both 10 pixels so let's save
this and let's go ahead and open our web
page again and there you can see we
looks like we have the correct space
here doesn't it now you might be
wondering well why is this still down
here well again we have to move this
above our main content pane and we'll do
that Amit but I want to explain how I
got that 320 pixels so we'll close this
out now what happened here was that you
basically have to add up the space that
we need to fit our sidebar in there so
the width
it was 260 pixels plus the padding on
the right and the padding on the left so
that would give us 300 pixels and don't
forget the margin on the left in the
margin right which is 10 pixels that
gives us you guessed it 320 pixels and
so let's go ahead and move this and now
you can do that so we will copy this and
then get rid of it
we will put it right above our main div
we will save everything up here and we
will open up our web page and there you
can see everything fits nice and neat
and now this is nice because this will
size accordingly
no matter what the user sets their
browser to this will size accordingly
but it will never come within 320 pixels
of the right edge of the browser that
space will always be reserved for our
sidebar because we put that big margin
in here and what's nice about that too
is we really don't want to expand this
out we really don't want this to be
liquid we want our main content paint to
be liquid because this is the main
content that the people who are using
your website are going to be looking at
so it's better to have this become
larger and larger not our sidebar now
you may be wondering why is there 20
pixels here and there's only 10 between
the rest of our elements now you will
remember in the last CSS series we
talked about divs and how the margin
space between them works and you will
remember that it cuts it in half so even
though both of these elements have ten
pixels and it should be 20 pixels the
browser will cut it in half and make it
ten but remember our sidebar is not in
the float so the ten pixels it has gets
counted along with this navbar element
that makes 20 pixels now to get rid of
that's pretty simple let's go up here
and just borrow this code right here in
our main div and we'll copy and paste
this down over our 10 pixel margin here
for our side right element and what
we're going to do is we're going to give
everything 10 pixels except for the
margin top we want to make that zero
pixels and let's go ahead and save this
and let's open up our web page and there
you can see everything is size nice and
neat now so that's going to do it for
this vid
in the next video we're going to add
some more content panels so I'll see you
guys then