PayneLess Designs: Background Images - Repeated Left/Right

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US"><head>
<title>Background Images - Repeated Left/Right</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="created" content="Wed, 08 Jun 2011 07:58:45 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="PayneLess Designs">
<meta name="copyright" content="Jan 2004 to present.">

<style type="text/css">
* { margin: 0; padding: 0; border: 0; }
h1 { text-align: center;
 }
div#wrapper {
width: 960px;
height: 600px;
margin: 0 auto;
/* border: 1px solid #f00; */
}

div#left-image {
width: 100px;
height: 600px;
float: left;
background: #f00 url(images/image-slice-1X5-red.png) repeat top left scroll;
/* border: 1px solid #ff0; */
}

div#right-image {
width: 100px;
height: 600px;
float: right;
background: #00f url(images/image-slice-1X5-blue.png) repeat top left scroll;
/* border: 1px solid #0f0; */
}

div#content-wrap {
width: 760px;
height: 600px;
margin: 0 auto;
background: #fff;
color: #000;
/* border: 1px solid #00f; */
}

p { margin-left: 3%; }
</style>

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iestyle.css">
<script type="text/javascript" src="site_js/js_blink4IE.js"></script>
<![endif]-->
</head>
<body>
<h1>Background Images - Repeated Left/Right</h1>
<!-- START Main Wrapper --><div id="wrapper">

<!-- START Left Image --><div id="left-image"></div><!-- END Left Image -->
<!-- START Right Image --><div id="right-image"></div><!-- END Right Image -->

<!-- START Content Wrap --><div id="content-wrap">
<p>Main content here.</p>
</div><!-- END Content Wrap -->

</div><!-- END Main Wrapper -->
</body></html>