Уже открывал эту тему про макет но так как поспешил и не проверил, вышел косяк не кросс браузерный.
Этот макет проверил на резину при отсутвии контента и с контентом.
Рабочий на ИЕ6, Опере, Лисе,Сафари.
Макет ограничен резиной по ширине в 1000рх минимальная и максимальная 1100рх,
при желании можете задать свои ограничения.
Макет в три колонки, ширина колонок плавающая 33% по ширине, высота 100%
и при отсутствии контента, так-же контент тянет по высоте.
Подвал пришит к низу намертво, высота 50рх, используется отрицательный отступ у блока .all margin-bottom:-50px для подвала.
В общем ближе к делу, кому надо забирайте, подпиливайте под себя, задавайте свои размеры, меняйте проценты на пиксели.
Экономьте время и говорите мне спасибо :D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
*{margin:0;padding:0;}
html,body{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.wrap{
width: 100%;
height: 100%;
min-width:1000px;
min-height: 100%;
max-width: 1200px;
margin:auto;
}
/* IE hack */
*html .wrap {
width:expression(document.documentElement.clientWidth < 1000 ? '1000px' :
(document.documentElement.clientWidth > 1100 ? '1100px' : 'auto'));
}
*html .all {height:100%; width: 100%;}
.all{
min-height: 100%;
margin-bottom:-50px;
padding: 0px;
overflow:hidden;
_zoom:1; /* IE, hasLayout*/
background-color: #CCCCFF;
position: relative;
}
.col1, .col2, .col3{
padding-bottom:10000px;
margin-bottom:-10000px;
height: 100%;/*min-height: 100%;*/
}
.col1{
width: 33%;
float:left;
overflow:hidden;
position:relative;
}
.col2{
width: 33%;
float:left;
overflow:hidden;
position:relative;
}
.col3{
width: 33%;
float:left;
overflow:hidden;
position:relative;
}
.footer{
background-color: #6666FF;
height: 50px;
width: 99%;
display: block;
position: relative;
}
</style>
</head>
<body>
<div class="wrap">
<div class="all">
<div class="col1" style="">
aa-aaaa<br><br>a-aa<br><br>aaa<br><br>aa<br><br>aaa<br>aaa<br><br>aa-aa<br><br>aaa<br><br>-aa<br><br>aa<br><br>aaa
<!-- aa-aaaa<br><br>a-aa<br><br>aaa<br><br>aa<br><br>aaa&a mp;l t;br>aaa<br><br>aa-aa<br><br>aaa<br><br>-aa<br><br> ; ;aa<br><br>aaa
aa-aaaa<br><br>a-aa<br><br>aaa<br><br>aa<br><br>aaa&a mp;l t;br>aaa<br><br>aa-aa<br><br>aaa<br><br>-aa<br><br> ; ;aa<br><br>aaa
aa-aaaa<br><br>a-aa<br><br>aaa<br><br>aa<br><br>aaa&a mp;l t;br>aaa<br><br>aa-aa<br><br>aaa<br><br>-aa<br><br> ; ;aa<br><br>aaa
aa-aaaa<br><br>a-aa<br><br>aaa<br><br>aa<br><br>aaa&a mp;l t;br>aaa<br><br>aa-aa<br><br>aaa<br><br>-aa<br><br> ; ;aa<br><br>aaa
aa-aaaa<br><br>a-aa<br><br>aaa<br><br>aa<br><br>aaa&a mp;l t;br>aaa<br><br>aa-aa<br><br>aaa<br><br>-aa<br><br> ; ;aa<br><br>aaa
aa-aaaa<br><br>a-aa<br><br>aaa<br><br>aa<br><br>aaa&a mp;l t;br>aaa<br><br>aa-aa<br><br>aaa<br><br>-aa<br><br> ; ;aa<br><br>aaa
aa-aaaa<br><br>a-aa<br><br>aaa<br><br>aa<br><br>aaa&a mp;l t;br>aaa<br><br>aa-aa<br><br>aaa<br><br>-aa<br><br> ; ;aa<br><br>aaa
aa-aaaa<br><br>a-aa<br><br>aaa<br><br>aa<br><br>aaa&a mp;l t;br>aaa<br><br>aa-aa<br><br>aaa<br><br>-aa<br><br> ; ;aa<br><br>aaa
aa-aaaa<br><br>a-aa<br><br>aaa<br><br>aa<br><br>aaa&a mp;l t;br>aaa<br><br>aa-aa<br><br>aaa<br><br>-aa<br><br> ; ;aa<br><br>aaa
aa-aaaa<br><br>a-aa<br><br>aaa<br><br>aa<br><br>aaa&a mp;l t;br>aaa<br><br>BBBBB<br><br>aaa<br><br>-aa<br><br> ; ;BBBBBB<br><br>aaa--> </div>
<div class="col2" style="background:#009999">bbbbbbb bbbb bbbbbbbbb bbb bbbbbbbbbbbb bbbbbbbb bbbbb bbbbbbb</div>
<div class="col3" style="background:#CC0000">bbbbbbbbbbbbb bbbbbbbbbbbbbbbb bbbbbbb bbbbb bbbcc </div>
</div>
<div class="footer"></div>
</div><!--WRAP ENDE-->
</body>
</html>