HTML and CSS Reference
In-Depth Information
#col1 p a,
#col2 p a {
display:block;
background-color:#661600;
border:8px solid #842800;
padding:1.1em 0 0em;
color:#ffc;
text-decoration:none;
}
The left and right columns ( #col1 and #col2 ) are containers for the paragraphs, which
hold the a s that create the actual boxes (the a s are set to display:block so they fill the entire
width of each p ). Phew. The center column ( #content ) is positioned using the same method
that our outer #wrapper uses to center the entire layout. Also, note the #superfluous outermost
element needs a height because the background image assigned to it is taller than all the ele-
ments within the layout (without the height, the background image would be cut off at the
point at which the contained elements finished rendering).
Everything looks good in Firefox so far, but before we move on to testing in IE, we must
correct one small issue with the positioning of our bottom background image (Figure 6-9).
Figure 6-9. Firefox doesn't expand the body to the full height of the browser window.
As it turns out, assigning height:100% to the html element fixes this Firefox problem and
doesn't affect other browsers, so after adding that to the top of our style sheet, we're ready for IE.
Search WWH ::




Custom Search