I would like to make use of a 3 column, equal height template credited to http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm
The code(shown below) is fairly understandable, but I cant seem to figure out how I can make each column have background images that display borders for each column.
Any hint on how I can achieve this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
<title>3 Column CSS Demo - Equal Height Columns with Cross-Browser CSS</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="3 Column CSS Demo - Equal Height Columns with Cross-Browser CSS" />
<meta name="keywords" content="3 Column CSS Demo - Equal Height Columns with Cross-Browser CSS" />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<style media="screen" type="text/css">
/* <!-- */
body {
margin:0;
padding:0;
}
#header h1,
#header h2,
#header p {
margin-left:2%;
padding-right:2%;
}
#active2 #tab2,
#active3 #tab3,
#active4 #tab4,
#active5 #tab5 {
font-weight:bold;
text-decoration:none;
color:#000;
}
#footer {
clear:both;
float:left;
width:100%;
}
#footer p {
margin-left:2%;
padding-right:2%;
}
/* Start of Column CSS */
#container3 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#89ffa2; /* column 3 background colour */
}
#container2 {
clear:left;
float:left;
width:100%;
position:relative;
right:33.333%;
background:#ffa7a7; /* column 2 background colour */
}
#container1 {
float:left;
width:100%;
position:relative;
right:33.33%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:29.33%;
position:relative;
left:68.67%;
overflow:hidden;
}
#col2 {
float:left;
width:29.33%;
position:relative;
left:72.67%;
overflow:hidden;
}
#col3 {
float:left;
width:29.33%;
position:relative;
left:76.67%;
overflow:hidden;
}
/* --> */
</style>
</head>
<body id="active3">
<div id="header">
<p><a href="http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks" title="Equal Height Columns with Cross-Browser CSS & No Hacks">« Back to the equal height columns article</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a></p>
<h1>Three Column CSS Demo of Equal Height Columns</h1>
<h2>Full Cross-Browser CSS. No CSS Hacks. No Images. No JavaScript.</h2>
<p>
<a id="tab2" href="http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm" title="Two Equal Height Columns">2 Column</a> |
<a id="tab3" href="http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm" title="Three Equal Height Columns">3 Column</a> |
<a id="tab4" href="http://matthewjamestaylor.com/blog/equal-height-columns-4-column.htm" title="Four Equal Height Columns">4 Column</a> |
<a id="tab5" href="http://matthewjamestaylor.com/blog/equal-height-columns-5-column.htm" title="Five Equal Height Columns">5 Column</a>
</p>
</div>
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">
<!-- Column one start -->
<h2>Equal height columns</h2>
<p>It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.</p>
<h2>3 Column Dimensions</h2>
<p>Each column is 33.33% percent wide with 2 percent padding on each side.</p>
<h2>No CSS hacks</h2>
<p>The CSS used for this 3 column layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used. Instead, this design uses percentage widths and clever relative positioning.</p>
<h2>No JavaScript</h2>
<p>JavaScript is not required. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won't see any of that nonsense here.</p>
<!-- Column one end -->
</div>
<div id="col2">
<!-- Column two start -->
<h2>No Images</h2>
<p>This three column layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and HTML?</p>
<h2>Valid XHTML strict markup</h2>
<p>The HTML in this layout validates as XHTML 1.0 strict.</p>
<h2>This layout is FREE for anyone to use</h2>
<p>You don't have to pay anything. Simply view the source of this page and save the HTML onto your computer. My only suggestion is to put the CSS into a separate file. If you are feeling generous however, link back to this page so other people can find and use this layout too.</p>
<!-- Column two end -->
</div>
<div id="col3">
<!-- Column three start -->
<h2>Cross-Browser Compatible</h2>
<p>This 3 column layout has been tested on the following browsers:</p>
<h3>iPhone & iPod Touch</h3>
<ul>
<li>Safari</li>
</ul>
<h3>Mac</h3>
<ul>
<li>Safari</li>
<li>Firefox</li>
<li>Opera 9</li>
<li>Netscape 7 & 9</li>
</ul>
<h3>Windows</h3>
<ul>
<li>Firefox 1.5, 2 & 3</li>
<li>Safari</li>
<li>Opera 8 & 9</li>
<li>Explorer 5.5, 6 & 7</li>
<li>Google Chrome</li>
<li>Netscape 8</li>
</ul>
<!-- Column three end -->
</div>
</div>
</div>
</div>
<div id="footer">
<p>This page uses the <a href="http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm" title="Equal Height Columns with Cross-Browser CSS & No Hacks">Three Equal Height Columns Layout</a> by <a href="http://matthewjamestaylor.com">Matthew James Taylor</a>. View more <a href="http://matthewjamestaylor.com/blog/-website-layouts">website layouts</a>.</p>
</div>
