<h1>Testing equal columns - old school</h1>
<div class="outer">
		<div class="content">
				<div class="content-left">
						<div class="celltop">
								<p><a href="#test">Cell 1</a></p>
								<p>Cell 1</p>
								<p>Cell 1</p>
						</div>
						<div class="inner">
								<p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </p>
								<p>test</p>
								<p>test</p>
								<p>test</p>
								<p id="test">test here</p>
						</div>
				</div>
				<div class="content-right">
						<p>test</p>
						<p>test</p>
						<p>test</p>
						<p>test</p>
						<p>test</p>
						<p>test</p>
						<p>test</p>
						<p>test</p>
						<p>test</p>
						<p>test</p>
						<p>test</p>
						<p>test</p>
						<p>test</p>
						<p>test</p>
						<p>test</p>
				</div>
				<div id="bg1"></div>
		</div>
</div>
h1 {
	margin:0 0 1em;
	text-align:center;
}
p{margin:0 0 1em;padding:0 5px}
.outer {
	width: 960px;
	margin: 0px auto;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.3);
	border:1px solid #000;
}
.content {
	width: 660px;
	margin: 0px auto;
	border-left:300px solid red;/* left column colour */
	background: green;/* right column colour*/
	position:relative;
}
.content:after {
	content:" ";
	display:block;
	clear:both;
	height:0;
}
.content-left {
	float: left;
	width: 300px;
	margin-left:-300px;
	position:relative;
}
.content-right {
	float: left;
	width: 600px;
}
.celltop {
	background:red;/* rub out lines */
	position:relative;
	z-index:2;
	padding:1px 0 10px;
}
.inner {
	margin:-10px 20px 0;
	padding:10px;
	border:1px solid #fff;
	border-bottom:none;
	border-radius:10px 10px 0 0;
	background:red;/* rub out lines */
	position:relative;
	z-index:2;
}
/* this creates the vertical lines from top to bottom */
/* we could use .content:before instead of using an actual element if ie7 support not required*/
#bg1 {
	position :absolute;
	left:-280px;
	width:258px;
	top:0;
	bottom:0;
	border-right:1px solid #fff;
	border-left:1px solid #fff;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.