I have been trying to create a CSS/XHTML layout (no tables), but neither I nor anyone else I have talked to can seem to make it. If somone can make it (valid please), I can send them a $10 payment through paypal. It is pretty simple, I just need it to look like the below picture, and don't need any color, either. If it can't be done, please let me know.
http://img13.imageshack.us/img13/9688/layout0rz.th.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>XHTML Layout w/css</title>
<style type="text/css">
div{ border: 1px solid black; display: block; background: #FFFFF0; }
div.nobord{ border: 0px none; }
div.hdr{ text-align: center; height: 80px; width: 80%; background-color: #FFB6C1; margin-left: 10%; }
div.capt{ width: 100%; top: 0px; margin: -1px; background-color: #B0E0E6; text-align: center; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; }
div.left{ width: 23%; height: 142px; left: 1%; position: absolute; }
div.middle{ height: 452px; top: 110px; left: 25.3%; position: absolute; }
div.right{ width: 23%; height: 142px; right: 1%; position: absolute; }
#lrow1{ top: 110px; }
#lrow2{ top: 265px; }
#lrow3{ top: 420px; }
#rrow1{ top: 110px; }
#rrow2{ top: 265px; }
#rrow3{ top: 420px; }
#mid_1{ width: 49%; }
</style>
</head>
<body>
<!-- Header -->
<div class="hdr">
<h1 class="hdr" id="hdr">HEADER</h1>
</div>
<!-- END Header -->
<!-- left Column -->
<div class="left" id="lrow1"><div class="capt">
Caption left 1
</div>
Content
</div>
<div class="left" id="lrow2"><div class="capt">
Caption left 2
</div>
Content
</div>
<div class="left" id="lrow3"><div class="capt">
Caption left 3
</div>
Content
</div>
<!-- END left Column -->
<!-- Center Column -->
<div class="middle" id="mid_1"><div class="capt">
Caption middle
</div>
Content
</div>
<!-- END Center Column -->
<!-- right Column -->
<div class="right" id="rrow1"><div class="capt">
Caption right 1
</div>
Content
</div>
<div class="right" id="rrow2"><div class="capt">
Caption right 2
</div>
Content
</div>
<div class="right" id="rrow3"><div class="capt">
W3C
</div>
<p style="padding: 5px; margin: 0px;">
<a href="http://validator.w3.org/check?uri=http://jdgsoftco.no-ip.com/layout.htm">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" style="border:0;width:88px;height:31px" /></a>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fjdgsoftco.no-ip.com%2Flayout.htm">
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" style="border:0;width:88px;height:31px" />
</a>
</p>
</div>
<!-- END right Column -->
<script type="text/javascript">
var IE4 = (document.all) ? 1 : 0;
if(IE4){
document.getElementById("hdr").style.paddingTop= '22px';
document.getElementById("mid_1").style.width = '50%';
}
</script>
</body>
</html>
I believe this works nicely. I've tested it, and validated it (internally with my html editor, W3C says it's valid also).
http://validator.w3.org/check?uri=http%3A%2F%2Fjdgsoftco.no-ip.com%2Flayout.htm
The challenge was very easy.
Oh, and you are welcome, and don't send me money.
To see this in action... http://jdgsoftco.no-ip.com/layout.htm