ptg16476052184 LESSON 8: Using CSS to Style a Site
a page design that only looks right if it’s at least 600 pixels wide. You could use the fol-
lowing style:
#container { min-width: 600px; }
The element with the ID container will expand to fit the size of the browser window as
long as it’s at least 600 pixels wide. If the browser is smaller than 600 pixels wide, the
contents of the element will scroll off the screen. Likewise, you may want to constrain
the maximum size of an element so that lines of text do not become so long that they’re
difficult to read. To do so, use the following style:
#container { max-width: 800px; }
You can also use both styles together to keep the size of your page within a certain range,
regardless of the size of the user’s browser window:
#container { min-width: 600px; max-width: 800px; }
Normally elements in HTML are sized to fit the content that is placed within them.
However, if you constrain the size of an element with a size or a maximum size and then
place content inside the element that won’t fit, the browser has to decide what to do with
it. By default, when content won’t fit inside its box, the browser just displays the over-
flow as best it ca n. As you can see from Figure 8.13, the results are not always pretty.The border shows the dimensions of the box specified in the style sheet. Because there’s
too much text to fit inside the box, it runs over the border and down the page. Using the
CSS overflow property, you can tell the browser what to do when these situations arise.
The values are visible (this is the default), hidden, scroll, auto, and inherit. You can
see how the different overflow settings look in Figure 8.14.FIGURE 8.13
Content that is too
large for its con-
tainer.