Layout Option

in reference to this question on stackoverflow: http://stackoverflow.com/questions/10360750/css-how-to-layout-3-columns-2-are-optional

HTML

</div>
<div class="colmask threecol">
	<div class="colmid">
		<div class="colleft">
			<div class="col1">
				<!-- Column 1 start -->
				<h2>Main Content</h2>
				
				<p>THIS IS MAIN CONTENT.</p>
				<!-- Column 1 end -->
			</div>
			<div class="col2">
				<!-- Column 2 start -->
				<h2>No CSS hacks</h2>
				<p>The CSS used for this layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used in conjunction with a width. Instead, this design uses percentage widths and clever relative positioning.</p>
				<h2>SEO friendly 2-1-3 column ordering</h2>
				<p>The higher up content is in your page code, the more important it is considered by search engine algorithms (see my article on <a href="http://matthewjamestaylor.com/blog/link-source-ordering-seo">link source ordering</a> for more details on how this affects links). To make your website as optimised as possible, your main page content must come before the side columns. This layout does exactly that: The center page comes first, then the left column and finally the right column (see the nested div structure diagram for more info). The columns can also be configured to any other order if required.</p>
				<h2>Full length column background colours</h2>
				<p>In this layout the background colours of each column will always stretch to the length of the longest column. This feature was traditionally only available with table based layouts but now with a little CSS trickery we can do exactly the same with divs. Say goodbye to annoying short columns! You can read my article on <a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks">equal height columns</a> if you want to see how this is done.</p>
				<h2>No Images</h2>
				<p>This layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP...

CSS

/* column container */
.colmask {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:100%;			/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float:left;
	width:100%;			/* width of page */
	position:relative;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
					only padding top and bottom is included here, make it whatever value you need */
	overflow:hidden;
}
/* 3 Column settings */
.threecol {
	background:#eee;		/* right column background colour */
}
.threecol .colmid {
	right:25%;			/* width of the right column */
	background:#fff;		/* center column background colour */
}
.threecol .colleft {
	right:50%;			/* width of the middle column */
	background:#f4f4f4;	/* left column background colour */
}
.threecol .col1 {
	width:46%;			/* width of center column content (column width minus padding on either side) */
	left:102%;			/* 100% plus left padding of center column */
}
.threecol .col2 {
	width:21%;			/* Width of left column content (column width minus padding on either side) */
	left:31%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width:21%;			/* Width of right column content (column width minus padding on either side) */
	left:85%;			/* Please make note of the brackets here:
					(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}