HTML and CSS Reference
In-Depth Information
#header {
background: #272727 url(header-bg.gif) repeat-x bottom left;
padding:10px 15px 10px 13px;
}
#content-wrapper {
float:right;
background:#fff url(nav-to-content-trans.gif) repeat-y left;
width:73%;
max-width:73%;
}
#content-inner {
padding:5px 15px 0 15px;
}
#navigation {
width:25%;
max-width:25%;
float:left;
padding-top:15px;
}
#footer{
clear:both;
}
■
Note
Notice that the two widths are
73%
and
25%
for the content and the navigation, respectively. Choos-
ing
75%
and
25%
causes IE/Win to show the unsightly wrapping effect demonstrated earlier in this chapter.
For best effect, try this version and compare it to the previous version using a browser
such as Firefox, Netscape 7 or 8, or Opera. Internet Explorer? Ah, well, this will only work if you
are using IE 7 or above. Earlier versions do not support the
max-width
CSS property. However,
IE 6 and earlier also don't offer limitless scope for scaling fonts up like other browsers do, so
you probably don't need to worry about this problem too much. You aren't likely to be able to
scale the page design up so that it's bigger than the browser window anyway.
Figure 7-12 shows the web page at the default size, then notched up a bit in the second
screen. In the third screen, the width goes no further but the text scales up further within the
upper boundaries that have been set.
