Creating a CSS Layout
Box Model Calculation
According to the W3C, a box’s true width is its declared width plus borders and padding. In our example, our mathematical calculation can be expressed as follows:
240 (rendered width)=260 (declared width) = 10 pixel padding (left) + 10 pixel padding (right)
Padding and borders are counted twice. If your head is hurting at this slightly inept logic your probably not the only one. Think of it in this analogy: You purchase a package which is 60 pixels wide. When it arrives it has 10 pixels of foam padding on the left and right side of the box. Thus, the rendered width of the package is 40 pixels wide according to the W3C. In essence, when you declare a width on a box which is positioned you have two widths: a declared width and a rendered width. The latter is derived from any padding or borders which you assign to this element and is rendered to the browser. Save your file and preview the results.
Our page is a bit sickly looking at the moment, but we’ll fix that next.
Writing our #footer rule
Currently, the reason our footer doesn’t extend to the bottom of our page is because it has no height. It has no way of knowing or understanding where the content ends for either left or right columns. In order to give our footer the height it needs to extend to the bottom of the page, we need to clear both floated DIVs to get the footer back into the flow of the document. Additionally, we also insert our footer graphic with the following CSS rule:
#footer{
clear:both;
background-image:url(images/footer.jpg);
width:760px;
height:100px;
}
The following property-values are:
- Clear:
- Set to both will clear our floated DIVs (left and right columns) and put the footer back into the normal flow of the document
- Background-image:
- Set to our footer image
- Width:
- Set to a fixed width of 760 pixels which matches our image size
- Height:
- Set to a fixed height of 100 pixels which matches our image size
Save your file and preview the results.
Our page is really starting to take shape!
Formatting our copyright notice
Our background image in our footer makes the current text which is set to a color of black difficult to read. Let’s add the following rule to make it a bit easier to read:
#footer p{
font-size:.8em;
color:#FFFFFF;
padding:20px;
}
We set all paragraphs inside our footer rule to a color of white, and provide some space inside with padding. Save your file and preview the results.
Style our contact link - footer
Our contact link in the footer is also difficult to read, let’s add some link states to correct this:
#footer a:link{
color:#FFFFCC;
text-decoration:underline;
}
#footer a:visited{
}
#footer a:hover, #footer a:active{
color:#CCCCCC;
text-decoration:none;
}
We provide the four states for our footer contact link. Save your file and preview the results.
Format heading two and three
Let’s change the default appearance of our heading two and three tags which are present in our right column with the following rule:
h2{
font-size:1.4em;
color:#666666;
padding:10px;
}
h3{
font-size:1.2em;
color:#666666;
padding:10px;
}
We set an appropriate font size and color, along with padding to provide some horizontal and vertical off-set between our headings and the edge of our right column. Save your file and preview the results.
Format paragraphs
Our paragraphs are sitting close to our right columns edge and they are too large and fairly difficult to read. Add the following rule to correct this:
p{
font-size:.8em;
line-height:1.7em;
padding:10px;
}
Some people feel as though setting line-height on paragraphs of text makes for easier reading. Padding is set to provide a little breathing room inside our right column. Save and preview the results.
We'll finish the article by formatting our menu next.