Multiple columns

by Joe Gillespie — Oct 1, 2002

At the moment, we have a contents area that is a single column of text centred in the browser window. All the boxes we have used so far are stacked one on top of the other on the page because they have not been explicitly positioned absolutely or relatively.

To get boxes to sit side-by-side, you have to apply one of the float attributes - 'float: left' or 'float: right'.

For multi-column text, you can define a 'class' - in this case called '.col' and I have included the text style as well as the box details.

.col
{
color: black;
font-size: 11px;
line-height: 20px;
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #ccf;
text-align:left;
width:180px;
float:left
}

This assumes that I want all the columns to be the same. If they are not, they will need separate styles.

The columns need some space, or gutters, in between to give some separation - and at the top and bottom.

For the last example, the columns are completely different and have separate styles. I've moved the navigation into column 1, the content into column 2 and made column 3 a list of links - a fairly common page layout. For the content (col2) box, I've introduced the concept of 'borders'.

border-left:1px dotted red;

CSS provides a number of border styles, solid, dotted, dashed and the top, right, bottom and left borders can be treated separately in terms of style, colour and thickness. Borders go between the padding and margins of boxes so the background color, if there is one, goes right up to the border.

Another technique that I've used here is that of nesting boxes, no - nothing to do with garden birds.

#footertext
{
background-color: #0000b3;
text-align: left;
margin-right:auto;
margin-left: auto;
width: 450px
}

The 'footertext' box sits inside the 'footer' box in the same way that the 'content' box does within the main <body>. It has a fixed width of 450px and margins are 'auto' so it matches the position of the 'content' box and allows the text in both boxes to align on the left side. Using combinations of nested boxes of different widths and alignments gives huge scope for layout possibilities.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float