HTML and CSS Reference
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 aren't necessarily something described in the CSS specification. They are a method of combining mul-
tiple 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 par-
ticular the CSS3 media queries, the web is moving toward responsive layouts that start with a fluid structure but then
change that layout based on the size of a device—something that couldn't be done when fluid layouts were first in use.
In this chapter, you look at fixed and fluid layouts but actually use a hybrid of the two, and then in Chapter 16, you
add media queries to make the layout responsive!
Project files update (ch06-00): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
A web page, by default, is fluid. The reason is that the initial value for an element's width is auto , which tells the
browser to work out the width itself, based on the unused space around that element. Without any CSS applied to a
page—other than the user agent stylesheet— width: auto is the equivalent of width: 100% .
Before you gave the <body> element a max-width in the previous chapter, the Cool Shoes & Socks web page was