HTML and CSS Reference
In-Depth Information
Although you don't specify an exact width for fl uid or elastic layouts, you might want to
provide limits on how narrow or wide an element can extend. If an element is very wide,
its lines of text might become too long to be easily readable; likewise, if it is too narrow,
its text also can be diffi cult to read. Rather than allowing these problems to occur, you can
specify a minimum or maximum height or width for an element using the style properties
min-width:
value
;
min-height:
value
;
max-width:
value
;
max-height:
value
;
where
value
is once again a length expressed in one of the CSS units of measure. For
example, the style rule
body {
width: 95%;
min-width: 1000px;
max-width: 1400px;
}
sets the width of the page body to 95% of the width of the browser window, and also
limits the width to a range of 1000 to 1400 pixels. No matter the screen resolution, the
page body width will never go below 1000 pixels or above 1400 pixels. After discussing
the page layout issue with Dan, you both agree to develop the Cycle Pathology home
page as a fl uid layout starting with this particular style rule. You'll add it now to the
cp_styles.css
style sheet fi le.
To set the page width:
◗
1.
Return to the
cp_styles.css
style sheet in your text editor.
◗
2.
Within the style rule for the
body
element, insert the following properties, as
shown in Figure 4-17:
Keep your style sheets
organized by placing style
rules that relate to the
same section near one
another in the document.
width: 95%;
min-width: 1000px;
max-width: 1400px;
Figure 4-17
Setting the page width
width of Web page body is 95% of
the width of the browse
r window
width is constrained to the range
1000 pixels to 1400 pixels
◗
3.
Save your changes to the file.
