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.
In this chapter, we're going to focus on building fixed layouts, and we've worked with fixed layouts already, and for the most part we've discussed all the concepts that you need to know in order to create them. So our focus here will be on defining exactly what a fixed layout is, and on the issues that you're going to need to consider when you're thinking about using them. So fixed layouts are layouts that are set to an overall fixed size that doesn't react to changes like browsers being resized or device-orientation changes. In fact, in their pure form, fixed layouts really don't care about things like the width of the browser window, what device they are on, or how the site is being viewed.
Most fixed-width layouts start with an overall width value that's applied to the body tag or to a wrapper element that surrounds the site's content. The side is then centered or aligned based on personal preference. Interior spacing is then defined for container elements at values that divide up the available space. Element spacing is typically controlled through the use of margins or padding, and the resulting values will typically add up to the overall defined width. Most fixed-width sites are designed with the desktop in mind. As such, the average target size has increased over the years.
Now, originally designers targeted 640x480 monitors, which increased to 1024x768, and has currently grown to occasionally targeting 1280x960. Regardless of which size you're targeting, most designers set the width to a value slightly smaller than the target size to allow for things like browser chrome or maybe floating browser windows that aren't maximized. Many layouts currently target around 960 pixels, which would still be visible on the 1024x768 monitor.
Now, like any technique, there are pros and cons to using fixed layouts. Fixed layouts tend to be easier to create and require less code than other layout types. You're only targeting one size, so you have less to consider when designing and writing the layout. You also have a greater amount of control over the visual aspect of your design. Since elements are fixed in place, it's a little easier to create pixel-precise layouts that look exactly the way that you want them to. Because they don't change, they also provide a consistent look and feel for the user.
There are of course some downsides to using fixed layouts. Their very nature means that they don't adapt to other devices or smaller browser windows, meaning that users sometimes have a less-than-optimal experience, due to increased scrolling or content being cut off. On larger monitors, smaller fixed layouts can look lost, with large amounts of empty space surrounding the layout. They are also tied to the very rigid nature. An element-spacing problem that might even go undetected on a flexible layout could potentially break a fixed layout, meaning that small changes to layouts have to be very thoroughly tested.
Now, as a designer, you should keep all these points in mind when deciding on whether to use a fixed layout or not. The recent explosion of mobile devices means that fixed layouts to some degree ignore a significant part of a site's potential user base. Later on, we're going to explore creating flexible layouts that change when resized and responsive layouts that change based on factors such as screen size, orientation, and resolution. For now, let's take a closer look at building fixed layouts.
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.