<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.