Web Design Reference: 2 columns in CSS

Thursday, March 01, 2007

2 columns in CSS

The Basic Layout Classes

The DOCTYPE has to be correct for this to work.

.contentContainer {
margin:0 auto;
width:800px;
}
.contentL {
float:left;
width:400px;
}
.contentR {
float:right;
width:400px;
}

The widths are very sensitive properties

content L width + content R width must be < = "contentContainer". Any padding or margin applied will disrupt their side-by-side balance so be careful.

Let Me Clear My Float

You will need to "push down" the div that follows the "contentContainer" div with this CSS property:

.following-div {
clear:both;
}

Backgrounds can cause trouble too

If you run into problems with background colors/images not showing up (in Firefox) of your "contentContainer" div, you can add one of these classes:

.contentContainer {
float: left;
}

or

.floatfix {
clear: both;
}

insert < br class="floatfix" > before the "contentContainer" 's closing div tag