July 29, 2001

CSS in detail

Let's look at a two-column layout on Glish.com (ALA style):

body { margin:0px 0px 0px 0px; } <-- nothing tricky here, just establishing the margins as zero pixels

#leftcontent { <-- we're setting the width of the column, borders and margins
float:left;
width:67%;
background:#fff;
border-right:2px solid #000;
border-bottom:2px solid #000;
margin-right:15px;
padding-bottom:20px;}

#rightcontent {
}

p,h1,pre { <--- defining some text elements
margin:0px 30px 10px 30px;
}

h1 {
font-size:14px;
padding-top:10px;
}

#rightcontent p { <--- establishing the right column
font-size:10px;
margin-left:0px;
}

Ok, so we stash this code in the "head" section of a web page and then set it with two "div" sections, one each for the left and right columns.

Here is the example (be sure and look at the source code)