Start learning with our library of video tutorials taught by experts. Get started

CSS Fundamentals
Illustration by

Basic layout concepts


From:

CSS Fundamentals

with James Williamson

Video: Basic layout concepts

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-based 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 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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS Fundamentals
3h 14m Beginner Sep 26, 2011 Updated Dec 13, 2011

Viewers: in countries Watching now:

This course contains a high-level overview of Cascading Style Sheets, while exploring the basic concepts, terminology, and tools of the language. Beginning with an exploration of CSS syntax, author James Williamson explains how CSS modifies text, borders, backgrounds, and color; demonstrates CSS and HTML integration; and contextualizes the current state of CSS. The course also tours some of the most popular CSS editors and frameworks and lists online tools and resources for further study. This course is for people who want a big-picture overview before taking hands-on courses.

Topics include:
  • Understanding basic selector types
  • Integrating CSS with HTML
  • Examining browser rendering differences
  • Exploring CSS specifications
  • Checking browser support
  • Understanding the box model
  • Adjusting margins and padding
  • Positioning elements
  • Exploring basic layout concepts
  • Understanding media queries
  • Introducing CSS3
  • Using CSS Reset
Subjects:
Web Web Foundations
Software:
CSS
Author:
James Williamson

Basic layout concepts

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-based 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 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 print a quick markup 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 HTML5 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 could 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 would be determined by its content. In this case, we'll go ahead ad define a 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 of our navigation, we might want the menu to be a specific height as well. Depending upon 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 then 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 face 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 going to also assign width to them. Now notice that I'm giving the sidebar a width of 30%, while giving the content a width the 60%.

These widths will be based off a calculated width of their parent element, in this case, the body tag. By making the 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 has now 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 a 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 will 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 workarounds from various layout issues. But, by and large, page layout isn't any harder than any other CSS technique that you're going to learn.

Just be sure to learn as many different techniques as you can, including the emerging CSS3 capabilities, like the flex box and CSS grids 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.

Find answers to the most frequently asked questions about CSS Fundamentals.


Expand all | Collapse all
please wait ...
Q: This course was updated on 12/13/2011. Can you tell me what has changed?
A: One movie called "Who is this course for?" was added to provide information on what you can expect to get from the course, depending on your level of familiarity with CSS.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.