Я пытаюсь получить набор из 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="#" 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>
