HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [114]
♦ Identifying the divs: If you make each border a different color, it’ll be easier to see which div is which when they begin to overlap.
♦ Specifying the size of each div: The text inside a div isn’t always a good indicator of the actual size. The border tells you what’s really going on.
Of course, you won’t leave these borders in place. They’re just helpful tools for seeing what’s going on during the design process. Look at borders.html and borders.css on the CD-ROM or Web site to see the full code.
Figure 2-3 displays how the page looks with the color borders turned on.
It’s fine that you can’t see the actual colors in the black-and-white image in Figure 2-3. Just appreciate that when you see the page in its full-color splendor, the various colors will help you see what’s going on.
Figure 2-3: Colored borders make it easier to manipulate the divs.
Setting up the floating columns
This particular layout doesn’t require major transformation. A few CSS rules will do the trick:
#head {
border: 3px black solid;
}
#left {
border: 3px red solid;
float: left;
width: 20%;
}
#right {
border: 3px blue solid;
float: left;
width: 75%
}
#footer {
border: 3px green solid;
clear: both;
}
I made the following changes to the CSS:
♦ Float the #left div. Set the #left div’s float property to left so other divs (specifically the #right div) are moved to the right of it.
♦ Set the #left width. When you float a div, you must also set its width. I’ve set the margin to 20 percent of the page width as a starting point.
♦ Float the #right div, too. The right div can also be floated left, and it’ll end up snug to the left div. Don’t forget to add a width. I set the width of #right to 75 percent, leaving another 5 percent available for padding, margins, and borders.
♦ Clear the footer. The footer should take up the entire width of the page, so set its clear property to both.
Figure 2-4 shows how the page looks with this style sheet in place (see floated.html and floated.css on the CD-ROM or Web site for complete code).
Tuning up the borders
The colored borders in Figure 2-4 point out some important features of this layout scheme. For instance, the two columns are not the same size. This can have important implications.
Figure 2-4: Now, the left column is floated.
You can change the borders to make the page look more like a column layout. I’m going for a newspaper-style look, so I use simple double borders. I put a black border under the header, a gray border to the left of the right column, and a gray border on top of the bottom segment. Tweaking the padding and centering the footer complete the look. Here’s the complete CSS:
#head {
border-bottom: 3px double black;
}
#left {
float: left;
width: 20%;
}
#right {
float: left;
width: 75%;
border-left: 3px double gray;
}
#footer {
clear: both;
text-align: center;
border-top: 3px double gray;
}
The final effect is shown in Figure 2-5.
Figure 2-5: This is a decent design, which adjusts with the page width.
Advantages of a fluid layout
This type of layout scheme (with floats) is often called a fluid layout because it has columns but the sizes of the columns are dependent on the browser width. This is an important issue because, unlike layout in the print world, you really have no idea what size the browser window that displays your page will be. Even if the user has a widescreen monitor, the browser may be in a much smaller window. Fluid layouts can adapt to this situation quite well.
Fluid layouts (and indeed all other float-based layouts) have another great advantage. If the user turns off CSS or can’t use it, the page still displays. The elements will simply be printed in order vertically, rather than in the intended layout. This can be