HTML and CSS Reference
In-Depth Information
In the previous chapter, you made the page a hybrid layout, by adding the following rule set to styles.css:
body {
...
margin: 0 auto;
max-width: 960px;
}
Let's start with the obvious:
max-width
is the maximum width an element should be. Here, you specified the
<body>
element should get no bigger than
960px
. Because a
width
isn't specified, the default width of the
<body>
is
100%
unless your browser is narrower than
960px
, in which case the
<body>
element is the same
width as your browser.
This layout is a hybrid. Although you fixed the maximum width of the page to 960px, it is still fluid below those 960
pixels.
Technically, a layout doesn't have to be a hybrid (a mixture of fixed and fluid) to be responsive; it just needs to be
fluid. The reason you make Cool Shoes & Socks a hybrid—fluid below 960px and fixed above—is to make sure the
site scales down to size on mobile devices but doesn't grow so big that it looks messy on displays with a large resol-
ution. Currently, the biggest screen resolution available is 2,560px wide. If the page is allowed to stretch 100%
across a screen of that size, sentences become very long and there is a lot of white space between elements, neither
of which is great for readability and usability. Of course, a 960px wide site on a 2,560px wide screen leaves a lot of
empty space on either side of the site, so you might want to make the
max-width
wider to better accommodate. I
leave that choice to you, but for
CSS3 Foundations
, I stick with 960px.
You also added the declaration
margin: 0 auto
, so what does that do? The
margin
property is similar to
padding
, but rather than adding space between the borders of an element and its child elements,
margin
adds
space between the borders of an element and its parent element. The layout of elements in this way is known as the
box model,
which is covered in Chapter 7. The margin you added to the
body
rule set specifies two values: the first
being the top and bottom values; and the second, the left and right. So, the
<body>
element has no margin on the
top and bottom, but the left and right are half of the remaining space between the
<body>
and
<html>
ele-
ment—in other words, centered!
Now that the page has a hybrid layout, if you reduce the size of the browser, the page shrinks to fit. However, the
smaller the browser becomes, the less room elements have and everything starts to look crammed. In Chapter 16,
you learn to use media queries to change the style of elements based on the size of the browser window or device on
which the page is being viewed, making the page responsive.
Fluid Images
If you're keen of eye, you may have noticed that although the Cool Shoes & Socks page is now a hybrid layout,
while most of the webpage shrinks to fit the browser window below 960px, the showcase image doesn't.
As you can see in Figure 6-2, when a browser is shrunk below 960px, a horizontal scroll bar is added to the page so
the user can move across to see the overflow.
