- Now that we've learned a little bit
about positioning elements with CSS
and how the various methods of positioning work,
I want to walk through one of the more common strategies
used by designers when creating CSS space layouts.
Now with this movie,
I'm not advocating one specific
layout technique over another.
As you learn CSS, you'll soon see that
there are about as many variations
on how to create CSS layouts as there are designers.
I just want to give you a starting point
so that you can see how designers
typically approach page layout
and how various techniques are combined
to drive the overall page design.
I want to start with the concept of page regions.
Most designers will create a quick mockup
of pages with content regions just sort of blocked out.
This will allow them to design towards
the functionality of the site
and consider content first
before getting caught up in the visual design.
It also allows designers to start thinking
about the structure of their HTML.
Each one of these content regions
will most likely be represented in the page structure
by a containing element.
Now in the past, we've been pretty much limited
to using divs for these purposes.
But HTML 5 now gives us several new semantic tags
to use when marking up sections of content.
No matter which tags are used,
the concept here is that sections of content
are contained within parent elements.
This serves the dual purpose
of grouping the content together
and giving us a containing block
to use for positioning and styling.
Let's take a look at how we can create
a simple, two-column layout using these containing blocks.
The first thing we'll do
is give the body element a defined width
to set the size of the page,
and then center it
by giving it a right and left margin of auto.
In this case, we'll create a flexible layout
by using percentages,
but if we wanted to target a specific screen size,
we can do that by using pixels.
With our header element,
we don't really need to do anything.
It will expand to fill the body tag
and if we don't define a height,
it will be determined by its content.
In this case, we'll go ahead and define the height
to make sure the header takes up the visual space
we need for the layout.
We'll also add a little margin
to the bottom of the header element
to separate its content from the navigation.
In the case for our navigation,
we might want to the menu
to be a specific height as well.
Depending on how you structure your navigation,
you'll have several opportunities to do that.
Just for the sake of simplicity,
I'll go ahead and set it here,
and add another bit of bottom margin
to separate the navigation from the content.
You may have noticed here too
that I'm using ems instead of pixels for margins.
The reason I'm doing that
is because I'm doing a fluid layout.
The ems will be relative to the size of the text,
connecting the page layout to the device's font size.
Now next up, we faced our first real challenge.
We need to have our sidebar
and main content arranged as two columns.
The easiest way to do that
would be to use floats.
So in this case, I'll float the sidebar to the left
and the content to the right.
I'm gonna also assign width to them.
Now notice that I'm giving the side bar
a width of 30%
while giving the content a width of 60%.
These widths will be based off
the calculated width of their parent element.
In this case, the body tag.
By making their width not quite 100%,
I'm defining the amount of space between the two columns.
In this case, 10%.
Again, I'll let the content itself control
the height of these elements.
Now, floating these two elements
gives us our columns,
but it also causes problems with our footer.
As you can see, our footer now has moved up
and is underneath the sidebar and content regions.
We'll need to clear the footer
and move it back down underneath our content.
That's it.
The basic layout of the page is complete.
From there, you'll begin to control the layout
of the content within the regions themselves.
For the navigation, for example,
you'll probably take the list items within an unordered list
and float them so they appear
as horizontal menu items.
You might also want to control the positioning
of the items in the header
by setting the header's position to relative
and then absolutely positioning an item inside of it
like the logo.
We might also float items within content regions
to control how items like text
and images interact with each other.
This is of course, just one example of how layout techniques
can be combined to control page layout.
What I'm hoping it will do,
is show you that basic layouts
can be handled with a minimum of effort,
and that CSS layout doesn't have to be intimidating.
Yes, you'll need to dig a little deeper
into the techniques I've mentioned here,
and you'll need to start learning about
how browser rendering differences
can force you to seek work arounds
for various layout issues,
but by and large, page layout isn't any harder
than any other CSS technique that you're gonna learn.
Just be sure to learn as many
different techniques as you can,
including the emerging CSS3 capabilities like the flexbox
and CSS grid modules.
By understanding the ins and outs of various layout methods,
you'll be able to craft solutions
that are tailored specifically
to your site's content and needs,
and not be tied to a single layout or page structure.