I am trying to get a set of 4 div column's (class siteCol) height to fill 100% of its container (id sites). the reason being, one column can have longer text than the others, but they should all be as tall as the tallest column. I have tried everything. Any help would be greatly appreciated. Code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>title</title>
<style type="text/css" rel="stylesheet">
html{height:100%}
body{margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;height:100%}
#wrapper{background:#ccc;width:989px;min-height:1240px;margin:42px auto 0 auto;position:relative;display: block;}
#wrapper #content{width:670px;margin:0 auto;padding-top:200px;position:relative;font-size:14px;line-height:17px}
#wrapper #sites{width:870px;margin:135px auto 0 auto;height:auto;position:relative;display: block;}
#wrapper #sites .siteCol{text-align:center;width:185px;padding:9px;float:left;margin-left:14px;position:relative;height:100%;display: block;}
#wrapper #sites .siteCol p{text-align:left;color:#fff;font-size:12px;margin-top:280px;line-height:18px;}
#wrapper #sites #brighton{background:#7f826d;margin-left:5px}
#wrapper #sites #bridgewater{background:#4a9195;}
#wrapper #sites #beaver{background:#852b20;}
#wrapper #sites #vanport{background:#005f99;}
#footer{text-align:center;clear:both;margin:50px auto 0 auto;font-size:12px}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<p>Content Block </p>
</div>
<div id="sites">
<div class="siteCol" id="brighton">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a nunc ligula. Vivamus sit amet massa felis. In dapibus congue nisl, quis ultrices diam ultricies sit amet. Pellentesque luctus orci vitae nunc rhoncus ut venenatis dui eleifend. Vestibulum eu dui at orci condimentum</p>
<a href="#" target="_blank"><img src="images/learn_more.png" alt="Learn More" border="0" /></a>
</div>
<div class="siteCol" id="bridgewater">
<p>Nunc euismod quam tristique dolor tincidunt venenatis. euismod quam tristique dolor </p>
<a href="#" target="_blank"><img src="images/learn_more.png" alt="Learn More" border="0" /></a>
</div>
<div class="siteCol" id="beaver">
<p>Nunc euismod quam tristique dolor tincidunt venenatis.</p>
<a href="#" target="_blank"><img src="images/learn_more.png" alt="Learn More" border="0" /></a>
</div>
<div class="siteCol" id="vanport">
<p>Nunc euismod quam tristique dolor tincidunt venenatis.</p>
<a href="#" target="_blank"><img src="images/learn_more.png" alt="Learn More" border="0" /></a>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © 2010. All rights reserved./p>
</div>
</body>
</html>