New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Basic layout concepts

From: CSS Fundamentals

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.

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.

Show transcript

This video is part of

Image for CSS Fundamentals
CSS Fundamentals

36 video lessons · 67018 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

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.