Dynamic Drive: CSS Liquid Layout #3.9- (Fluid-Fluid-Fixed)

Instructions: CSS Liquid Layout #3.9- (Fluid-Fluid-Fluid) [View Demo]

Description: This is a 3 columns fluid layout with a default width of 100%. All 3 columns are fluid, and adjust accordingly as the window is resized.

Responsive behavior: The layout is responsive in nature. Specifically, it:

Drops down the right column and makes it and the main container fluid when the browser width is 840px or below
Drops down the left column and makes it fluid as well when the browser width is 600px or below

Layout Source:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dynamic Drive: CSS Liquid Layout #3.9- (Fluid-Fluid-Fixed)</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
}

#contentcolumn{
margin-left: 45% /*Set margin to (LeftColumnWidth) + (RightColumnWidth)*/
}

#leftcolumn{
float: left;
width: 25%; /*Width of left column in percentage*/
margin-left: -100%;
background: #C8FC98;
}

#rightcolumn{
float: left;
margin-left: -75%; /*Set margin to (LeftColumnWidth) - 100%*/
width: 20%; /*Width of right column in percentage*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

/* ####### responsive layout CSS ####### */

@media (max-width: 840px){ /* 1st level responsive layout break point- drop right column down*/
	
	#rightcolumn{
	float: none;
	width: 100%;
	margin-left: 0;
	clear: both;
	}
	
	#contentcolumn{
	margin-left: 25%; /*Set margin to (LeftColumnWidth) */
	}

}

@media (max-width: 600px){ /* 2nd level responsive layout break point- drop left column down */
	#leftcolumn{
	float: none;
	width: 100%;
	clear: both;
	margin-left: 0;
	}
	
	#contentcolumn{
	margin-left: 0;
	}
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.9- (Fluid-Fluid-Fluid)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>20%</em></b> <script type="text/javascript">filltext(20)</script></div>
</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>180px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</div>


</body>
</html>

CSS Equal Columns Height script: Need the height of all the columns in this CSS layout to be the same? Use this plug and play script on it.

CSS Liquid Layout #3.9- (Fluid-Fluid-Fluid)

CSS Library: CSS Layouts: Three Columns & Liquid Layouts: Here

Instructions: CSS Liquid Layout #3.9- (Fluid-Fluid-Fluid) [View Demo]