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 ...

Get CSS3 Foundations now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.