HTML and CSS Reference
In-Depth Information
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 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
Fluid
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
completely fluid.
