CSS and HTML for 1-5 flexible columns

in code


I’m drunk, but these seem useful to people, so here we are. I’m a bit annoyed with all of those stupid posts that all-caps scream about their super-duper tabulated-design-fuck-whatever-compliant multi-column design, but fail to give you just the CSS and HTML with a concise explanation.

These frameworks use nested divs (look at the ASCII graphs heading each) and can be inserted by anyone into their framework without breaking anything.

In each case, content goes into the “bottom” numbered column, e.g. .two-columns-1 or .five-columns-3. Columns are evenly spaced, self-contained, and you don’t need any other spacers or clears except for what you add through the content.

Here’s an example of use:

<div class="four-columns">
	<div class="four-columns-1-2">
		<div class="four-columns-1">
			<h1>Column #1</h1>
		</div>
		<div class="four-columns-2">
			<h1>Column #2</h1>
		</div>
	</div>
	<div class="four-columns-3-4"">
		<div class="four-columns-3">
			<h1>Column #3</h1>
		</div>
		<div class="four-columns-4">
			<h1>Column #4</h1>
		</div>
	</div>
</div>
/*
ONE COLUMN:

.one-column
*/

.one-column {
	margin: 0 auto;
	overflow: auto;
	width: 90%;
}

/*
TWO COLUMNS:

.two-columns
|-------------------|
.two-columns-1	    .two-columns-2
*/

.two-columns {
	margin: 0 auto;
	overflow: auto;
	width: 90%;
}

.two-columns-1 {
	float: left;
	width: 50%;
}

.two-columns-2 {
	float: right;
	width: 50%;
}

/*
THREE COLUMNS:

.three-columns
|-----------------------|
.three-columns-1	.three-columns-2-3
			|-----------------------|
			.three-columns-2	.three-columns-3
*/

.three-columns {
	margin: 0 auto;
	overflow: auto;
	width: 90%;
}

.three-columns-1 {
	float: left;
	width: 33.335%;
}

.three-columns-2-3 {
	float: right;
	overflow: auto;
	width: 66.665%;
}

.three-columns-2 {
	float: left;
	width: 50%;
}

.three-columns-3 {
	float: right;
	width: 50%;
}

/*
FOUR COLUMNS:
.four-columns
|---------------------------------------|
.four-columns-1-2		        .four-columns-3-4
|-------------------|		        |-------------------|
.four-columns-1	    .four-columns-2	.four-columns-3	    .four-columns-4
*/

.four-columns {
	margin: 0 auto;
	overflow: auto;
	width: 90%;
}

.four-columns-1-2 {
	float: left;
	overflow: auto;
	width: 50%;
}

.four-columns-3-4 {
	float: left;
	overflow: auto;
	width: 50%;
}

.four-columns-1 {
	float: left;
	width: 50%;
}

.four-columns-2 {
	float: right;
	width: 50%;
}

.four-columns-3 {
	float: left;
	width: 50%;
}

.four-columns-4 {
	float: right;
	width: 50%;
}

/*
FIVE COLUMNS:

.five-columns
|---------------------------------------|
.five-columns-1-2			.five-columns-3-4-5
|-------------------|			|------------------------------------|
.five-columns-1	    .five-columns-2	.five-columns-3-4	             .five-columns-5
					|-------------------|
					.five-columns-3	    .five-columns-4
*/

.five-columns {
	margin: 0 auto;
	margin-top: 10px;
	overflow: auto;
	width: 90%;
}

.five-columns-1-2 {
	float: left;
	overflow: auto;
	width: 40%;
}

.five-columns-3-4-5 {
	float: right;
	overflow: auto;
	width: 60%;
}

.five-columns-3-4 {
	float: left;
	overflow: auto;
	width: 66.665%;
}

.five-columns-1 {
	float: left;
	width: 50%;
}

.five-columns-2 {
	float: right;
	width: 50%;
}

.five-columns-3 {
	float: left;
	width: 50%;
}

.five-columns-4 {
	float: right;
	width: 50%;
}

.five-columns-5 {
	float: right;
	width: 33.335%;
}


Six Months in the Mountain Kingdom

in me


Your email address will not be published. Required fields are marked *