HTML and CSS Reference
In-Depth Information
Margin is 0.
Left padding is equal to the full width of the left column, including left and right padding.
Right padding is equal to the full width of the right column, including left and right padding.
Minimum width is equal to the full width of the left column plus the full width of the center column,
including the left and right padding of both.
The template in Listing 5.5 should make this clearer. The rules in the Fixed Values section should be copied
directly into your stylesheet without change, aside from the IDs of the columns. Then you can set the values in
the Chosen Values section to your liking. I've used em measurements here, but pixels, inches, and other length
units work as well. Finally, you calculate the values in the Calculated Values section based on the specified
formulas and the numbers you entered in the second section.
This would be somewhat easier if CSS supported variables and simple calculations. However, it doesn't, so you
have to determine the right sizes by hand using these formulas. Then insert the relevant literal values in your
stylesheet.
Listing 5.5. Three-Column Stylesheet with Fixed-Width Left and Right Columns, Liquid Center Column
Code View:
/* Fixed Values */
body {
margin: 0;
}
#Content {
width: 100%;
position: relative;
float: left;
}
#Pages {
margin-left: -100%;
position: relative;
float: left;
}
#Books {
margin-right: -100%;
position: relative;
float: left;
}
/* Chosen Values */
#Content {
padding-right: 2em;
padding-left: 2em;
}
/*
LC = Left column
RC = Right column
CC = Center column
*/
#Pages {
width: 9em; /* LC width */
padding-right: 1em; /* LC right padding */
Search WWH ::




Custom Search