CSS Layout Tutorial - 16 - The Fixed Layout Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

in this video we're going to take a look
at the fixed layout now in all the
previous videos in the CSS layout series
we designed a flexible or liquid web
page and let's open that up right now
and you can see it expands out nicely
and takes up all the space in the
browser window now let me open up the
fixed layout now I've already coated
this so we're not going to spend a lot
of time filling in the content panels
like we did in the liquid layout that's
pretty much the same but what I want to
do is talk about the main differences
between a fixed layout and a flexible
layout so let's go ahead and open up the
fixed layout now and you can see that is
the first major difference that it
doesn't expand out to the entire length
of the browser window you can see we've
got some white space and that's because
I have fixed this at 968 pixels in terms
of the width it cannot go any farther
than that and so if we toggle back to
the flexible layout you can see that we
cover the entire length of the browser
window so that's the first major
difference now how do we do this we
create what's called a container div and
that's the first and biggest difference
between a fixed and a liquid layout we
are actually creating a container to
hold all the rest of our divs so the
header the nav the main content the
sidebar they are all put inside one div
which is appropriately called a
container div and I like that named
container because that's what a
container does we put things into it and
it cannot expand outside of it so it
acts like a box a container it's even
called a wrapper some people call it
that and so let's take a look at the
code now and you can see we have the
same sections that we did in the
flexible layout we have the header the
nav the sidebar we have the main section
but what's different is the container
CSS code and that's what I created right
here so this of course is a stylesheet
let's take a look at the HTML now here
is the container right here the div and
here is the closing div tag for that
container and you can see all the rest
of the divs are contained inside of it
so that's the first thing you have to do
when you want to create a fixed layout
you want to create a container div and
then wrap all the rest of the divs
inside the container div which again
closes down here now if we take a look
at the CSS code for the container here's
where I set the width nine hundred and
sixty eight pixels so like I said before
it it cannot expand out any further than
that nine hundred and sixty eight pixels
so if we flip back to the fixed layout
from this edge to this edge over here it
is nine hundred and sixty eight pixels
long it will not go any further so it
won't go out to maybe twelve hundred
pixels I have basically indicated that
all the sections have to be contained
within nine hundred and sixty eight
pixels so that's the first thing you
would set is a maximum width now we will
set the margin to zero pixels and also
use this value called Auto and what that
does is Center the entire webpage and so
let's flip back here and you can see
here it's centered on the webpage and if
I didn't have that set correctly it
would place the webpage over here to the
left and I'll show you that right now
actually so let's go ahead and just
remove this and we will save our
stylesheet let's go back into the web
page and we will hit refresh and you can
see now the web page is now rendering
from the left side of the browser and
that's because I'm not centering the
container anymore so let's put that back
and save this and if we hit refresh
everything is centered back nice and
neat okay that's going to do it for this
video in the next video we will continue
on with a fixed layout oh one more thing
as usual I will paste all the source
into the YouTube message board for this
fixed layout