a blog by Christian Snodgrass
about programming, web and game design, and everything else

Three Column Layout with Divider without Images

In one of my past articles, Two Column Layout with Divider without Images, I introduced a method to create a two column layout, with a divider without needing images. At the end, I mentioned that you can also apply this technique to three columns.

How It Works

This works exactly the same as the two-column version. Since I don’t want to waste anyone’s time that has already read the two-column version, I’ll just say read the two-column version if you haven’t. ;)

Demo of the Three Column version

Seriously though, that’s why I love this. With a lot of techniques, to add a third column, the complexity of the code goes way up. However, with this solution, it doesn’t. The only difference is:

All stuff you probably could have guessed. ;)

The Code

Since this is identical to the two-column version, I’m just going to present the code. =)

CSS

.wrapper { 
	width: 900px; 
	margin: 0 auto; 
	background: #CCC; 
 
.content, .sidebar, .left_sidebar { 
	position: relative; 
 
.content:after, .sidebar, .left_sidebar { 
	border: solid #FFF; 
 
.content { 
	padding: 5px; 
	background: #CCC;		 
	border: #333 solid; 			 
	border-width: 0 305px 0 305px;  
 
.content:after { 
	content: "."; 
	position: absolute; 
	top: 0; 
	bottom: 0; 
	right: -5px; 
	left: -5px; 
	z-index: 0; 
	border-width: 0 5px 0 5px; 
 
.sidebar { 
	padding: 5px; 
	float: right; 
	color: #FFF; 
	background: #333;  
	width: 290px; 
	border-width: 0 0 0 5px; 
	z-index: 1; 
 
.left_sidebar { 
	padding: 5px; 
	float: left; 
	color: #FFF; 
	background: #333; 
	width: 290px; 
	border-width: 0 5px 0 0; 
	z-index: 2; 
 
.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 

HTML

<div id="wrapper" class="clearfix"> 
	<div id="sidebar"> 
	</div> 
	<div id="left_sidebar"> 
	</div> 
	<div id="content"> 
	</div> 
</div> 

Three Columns in Action

Here you go, the live example of Three Column Layout with Divider without Images, powered with my new Code Demo plugin (coming soon ;)).

Enjoy!


Related Articles


Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Back to Top