Two Columns Liquid with Color
Make a two column CSS layout with color in either column that spreads to the full height of the page?

This article will show you how to build a basic two column layout that has:

* Liquid width (based on the browser window size or viewport)
* Full width header and footer
* color in either or both columns
* color that stretches the full height of the columns - no matter which of them is longer

This method uses a background image to create the illusion of a colored column which means that the narrower column must be set to an exact pixels width. This may not suit your particular needs. However, there are many different methods that can be used to achieve a two column layout. Look around before you decide which one is right for you!

License Info: Free to use and abuse
Submitted: 1 Year, 1 Month, 4 Weeks, 1 Day, 19 Hours, 50 Minutes ago
Submitter: avatar  aycarumba
Style Rating:

0.0/10 (0 votes cast)


Style Author: Max Design
Author's URL: http://maxdesign.com.au

Demo URL: http://maxdesign.com.au/presen...

Resource Files

filetype   background.jpg  [14.2 KB]

save all   download all files as a zip

Code Snippets 
               body
		{
			margin: 0;
			padding: 0;
			font-family: georgia, times, "times new roman", serif;
			color: #000;
			background-color: #ddd;
		}
		
		#container
		{
			margin: 1em 5%;
			background-color: #FFF;
			background-image:  url(images/background.jpg);
			background-repeat: repeat-y;
			border: 1px solid #333;
		}
		
		#banner
		{
			background-color: #666;
			border-bottom: 1px solid #333;
		}
		
		#banner h1
		{
			margin: 0;
			padding: .5em;
		}
		
		#nav
		{
			float: left;
			width: 160px;
			margin-left: 10px;
			padding-top: 1em;
		}
		
		#nav p { margin-top: 0; }
		
		#content
		{
			padding-top: 1em;
			margin: 0 2em 0 200px;
		}
		
		#content h2 { margin-top: 0; }
		
		#footer
		{
			clear: both;
			background-color: #666;
			padding: 1em;
			text-align: right;
			border-top: 1px solid #333;
		}


<div id="container">
	<div id="banner">
		<h1>Site name</h1>

	</div>
	<div id="nav">
		<p>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.
		</p>
	</div>
	<div id="content">
		<h2>
			Page heading
		</h2>

		<p>
			Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
		</p>
		<p class="nextbutton">
			<a href="JavaScript:history.back()">&lt; Back to tutorial</a>
		</p>
	</div>
	<div id="footer">

		Footer stuff here
	</div>
</div>


Comments (1)
avatar
aycarumba » 1 Year, 1 Month, 4 Weeks, 1 Day, 19 Hours, 47 Minutes ago #

If you want no padding (i.e. the layout is full-width) use the following code for the #container div:

#container
{
margin: 1em 5%;
background-color: #FFF;
background-image:  url(images/background.jpg);
background-repeat: repeat-y;
border: 1px solid #333;
}

Add A Comment


Some bbcode allowed - [code][/code], [b][/b]

Name:
 (required)
Email:
 (required - will not be published)
Website:
Comment:
Security Code: Enter the characters in the green box

Visual CAPTCHA