Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
Flexible layouts allow you to create layouts that adjust based on the width of the browser or the viewport. If the browser is resized, flexible layouts will increase or decrease the available space for all content regions within a layout. This gives you the ability to design a layout that takes advantage of the space available to it, and can present a different look to viewers, based on the size of the browser window. Designing flexible layouts can be much more labor-intensive than designing fixed layouts, as you have to carefully plan out the relationship between all the elements within the layout.
What looks good at one size doesn't necessarily work at another size. That means that just like fixed layouts, there are pros and cons to using flexible layouts. Now the biggest positive for you users is that you have a layout that conforms their current resolution, and they're not having to do unnecessary scrolling, zooming, or size adjustments. It also gives them the freedom to resize the window without the additional penalty of horizontal scrollbars or content being lost. As a designer, you're freed from the rigid constraints of fixed layouts.
Instead of defining a pixel-perfect relationship between elements, you focus more on how those elements should relate and interact to each other in a generic way, and are less worried about exactly how much space a certain gutter or element is occupying. The flip side of that is that you do have to give up a certain amount of control over your design, and designers often balk at not being able to control exactly how their content is viewed. But with flexible layouts, you have to be content with losing some of that control.
Flexible layouts also often have element-spacing issues, especially at the extremes of viewport width. Now, really large resolutions often end up with a tremendous amount of space between elements, while smaller resolutions often create layouts that don't have enough separation. That's why it's common to have minimum and maximum width values specified for flexible layouts, to create a range of acceptable resolutions. Now this also means the flexible layouts are a lot harder to design. They require more planning, and the code for them is generally more complex.
Keep these factors in mind as you begin to plan your layouts and they'll help you determine whether a flexible layout is right for your project or not. For the rest of this chapter, we will break down what goes in to planning and building flexible layouts, and we are going to start by tackling one of the hardest aspects of it first, determining your layout dimensions.
There are currently no FAQs about CSS: Page Layouts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.