Page Layout with CSS - Web Development and Design Foundations with XHTML - page 244

Now let's consider the CSS configuration. Type the CSS in your document as it is
discussed as follows:
● Body Tag. This should be configured with the default fonts of Verdana, Arial, or
any sans-serif font. The page margin should be set to 0 pixels.
body { font-family: Verdana,Arial,sans-serif;
margin: 0 ;
}
● Wrapper. Configure a container, or wrapper, area to contain the two columns and
configure default background color ( #e8b9e8 ), text color ( #000066 ), width
( 100% ), and minimum width ( 800px).
#wrapper { background-color: #e8b9e8;
color: #000066;
width: 100%;
min-width: 800px;
}
● Left Column. The key to this two-column page layout is that the left 100 pixel
wide column is designed to float to the left. The left column uses the background
and text colors configured in the wrapper id.
#leftcolumn { float: left;
width: 100px;
}
● Right Column. Since the left column is 100 pixels wide and floats on the left side,
assign a 100 pixel wide left margin to the right column. Note the correspondence
between the width of the floated left element and the left margin of the compan-
ion page content. This margin value should be equal to or greater than the width
of the floated element to provide the look of a two-column layout. Configure a
background ( #ffffff ) and tex t ( #000000 ) color.
#rightcolumn { margin-left: 100px;
background-color: #ffffff;
color: #000000;
}
● Logo. The logo is configured with a background color of #eeeeee , text color of
#cc66cc , an extra large font size, 10 pixels of padding, and a solid black border
that is 1 pixel wide.
#logo { background-color: #eeeeee;
color: #cc66cc;
font-size: x-large;
border-bottom: 1px solid #000000;
padding: 10px;
}
● Content. The content area will be easier to read if there is additional empty
space on the top, right, and left sides. This can be configured using the padding
property. Typically, you have set the same padding value for all four sides of
the element's box. The padding set for the logo is an example of this. Padding
can be set for each side individually using the padding-top , padding-right ,