Carrington Build Documentation

Styling Columns and Rows From Scratch

If you remove the default CSS, you’ll have to add some additional styles to your style.css file for columns and rows. Here are some helpful best-practices we’ve found help.

Floating Columns

Columns are floated to stack items horizontally.

.cfct-block {
	/* Prevent double-margin float bug */
	display: inline;
	float: left;
}

 

To avoid running into the double margin float bug in IE6 and IE7, it’s recommended that you add display: inline; to columns, as seen above. Styling columns this way inoculates your layout against the bug, and does no harm in modern browsers, since floats are always “block” regardless of display.

You will also have to assign widths to each block type. For reference, here are the width definitions Carrington Build uses for the default styles:

.cfct-block-a,
.cfct-block-b,
.cfct-block-c {
	width: 33.3%;
}
.cfct-block-ab,
.cfct-block-bc {
	width: 66.6%;
}
.cfct-block-abc {
	width: 100%;
}
.cfct-block-d,
.cfct-block-e {
	width: 50%;
}

Automatic Row Clearing

Floats will muck up any layout if they’re not contained properly. Adding clearfix styles to your rows (seen below) expands the row to the height of the largest float, containing all floats.

.cfct-row:after { /* Clear floats */
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
.cfct-row {
    display: block;
    zoom: 1; /* Clearfix for IE */
}

See also:

Back to Carrington Build

These sections are available to the public. The remaining sections are available exclusively to customers.