CSS3 Foundations

chapter six

Creating a Basic Page Structure

In the preceding chapters, you added presentational styles to the Cool Shoes & Socks web page, but as yet, the page doesn’t have much structure other than the basic top-to-bottom layout of elements. In this chapter, you learn about fixed and fluid page layouts, plus a hybrid of the two that will help to make Cool Shoes & Socks responsive, so a layout can respond to the device on which it is being viewed.

Structure Types

Structure types aren’t necessarily something described in the CSS specification. They are a method of combining multiple CSS properties to create page structures that suit particular tasks.

In the early days of web pages, structure types tended to be fluid, meaning a web page stretched and resized as the browser did to always fill the viewport. This is where the “fluid” name comes from: It fills every area of the web page regardless of its size, just like a fluid fills its container.

As the web moved forward and design became more elaborate, web designers wanted more control over web pages. If a fluid page stretched depending on the browser window size, designers would have a difficult job designing a web page because they couldn’t be sure how that page would look to the users. The majority of the web started making use of the fixed-width layout, which is still the most-used structure type today.

Although fixed-width layouts are the most used today, with new technologies such as CSS3 and HTML5, and in particular the ...