Опитвам се да получа набор от височина на 4 div колони (клас siteCol), за да запълня 100% от нейния контейнер (id sites). причината е, че една колона може да има по-дълъг текст от останалите, но всички те трябва да са високи колкото най-високата колона. Всичко съм пробвала. Всяка помощ ще бъде високо оценена. Код по-долу:
<!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="/bg#" 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="/bg#" 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="/bg#" 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="/bg#" 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>
