Two-column floated layouts

Now that we've had some time to become familiar with the concepts of using…floats and how they affect surrounding elements, I want to show you a few common…approaches for creating float-based layouts.…I'm going to start with the most common layout, and that is a two-column layout.…Now we're going to be doing three different versions of exactly the same layout.…So the same HTML structure, we're just going to do it three different ways.…And that's really to show you guys that often it's a personal choice as to how…you control the layouts.…

Okay, so we have three files that I've opened up here.…If you look in the 03_06 directory, you're going to find 2col_v1, 2col_v2, and 2col_v3.…Just go ahead and open all three of them up, so that you know the structure of…the page that we're going to be working with here.…Very simple structure, just some basic building blocks if you will.…Inside the body we have a header, which is typical. We have a section, which is…going to be our first column.…We have an aside, which is the sidebar.…

Resume Transcript Auto-Scroll

Author

Released

2/7/2012

CSS: Page Layouts introduces basic layout concepts, gives advice on how to create properly structured HTML based on prototypes and mockups, and goes into critical page layout skills such as floats and positioning. Author James Williamson shows how to combine these techniques to create fixed, fluid, and responsive layouts. Designers are also shown how to enhance their pages through the creative use of CSS techniques like multi-column text, opacity, and the background property. Exercise files are included with this course.