[Помогите] По верстке 3х колонного макета

Вопрос такой, есть структура.

Код:

<div id="main">
	<div id="header">
		<div class="header"></div>   
		<a href="/" class="logo"></a>
	</div>
	<div id="content">
		<div id="left">
	   
		</div>
		<div id="center">
		</div>
		<div id="right">
		</div>
	</div>
	<div class="clear"></div>
	<div id="footer">
		</div>
</div>

Я хочу чтобы нормально прижимался футер к низу сайта, но не получается..
Вот стили.

Код:

#main{margin:0 auto 40px auto;width:1280px;}
#content{padding:10px 60px;margin-top:20px;position:relative;}
#left, #center, #right{position:absolute;}
#content #left{width:255px;left:70px;}
#content #center{width:640px;margin-left:290px;}
#content #right{width:180px;right:70px;}
.clear{clear:both;height:1px;overflow:hidden;}
#footer{height:120px; position:relative;}

Но при таких стилях, футер улетает вверх... Как можно это решить?

 

чтобы прижать футер книзу, можно чуть изменить структуру:

HTML:

<div id="main">
	<div id="header">
		<div class="header"></div>
		<a href="/" class="logo"></a>
	</div>
	<div id="content">
		<div id="left"></div>
		<div id="center"></div>
		<div id="right"></div>
	</div>
	<div class="clear"></div>
</div>
<div id="footer"></div>

Код:

#main {
	  width: 1280px;
	  margin: 0 auto;
	  min-height: 100%;
	  height: auto !important;
	  height: 100%;
}
#footer {
	  width: 1280px;
	  margin: -120px auto 0;
	  height: 120px;
	  position: relative;
}

так рекомендует http://csstemplater.com/

 

иногда CSS не может побороть проблемы с версткой и надо пользоваться скриптами. например:

Код:

<div id="main">
    <div id="header">
        <div class="header"></div>
        <a href="/" class="logo"></a>
    </div>
    <div id="content">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
    <div class="clear"></div>
</div>
<div id="footer"></div>

Код:

// JavaScript Document
<!--
        function getWindowHeight() {
            var windowHeight = 0;
            if (typeof(window.innerHeight) == 'number') {
                windowHeight = window.innerHeight;
            }
            else {
                if (document.documentElement && document.documentElement.clientHeight) {
                    windowHeight = document.documentElement.clientHeight;
                }
                else {
                    if (document.body && document.body.clientHeight) {
                        windowHeight = document.body.clientHeight;
                    }
                }
            }
            return windowHeight;
        }
        function setFooter() {
            if (document.getElementById) {
                var windowHeight = getWindowHeight();
                if (windowHeight > 0) {
                    var digitalHeight = document.getElementById('main').offsetHeight;
                    var footerElement = document.getElementById('footer');
                    var footerHeight  = footerElement.offsetHeight;
                    if (windowHeight - (digitalHeight + footerHeight) >= 0) {
                        footerElement.style.position = 'relative';
                        footerElement.style.top = (windowHeight - (digitalHeight + footerHeight)) + 'px';
                    }
                    else {
                        footerElement.style.position = 'static';
                    }
                }
            }
        }
        window.onload = function() {
            setFooter();
        }
        window.onresize = function() {
            setFooter();
        }
        //-->

 

Советую: http://www.xiper.net/collect/html-and-css-tricks/karkas-verstki/podval-k-nizu.html