Прижатый футер + еще кое-что

Samborsky · December 5, 2008

Здравствуйте, не получается реализовать следующее:

Нужно на дивах сделать верстку, чтобы получился результат как на рисунке,

а footer был прижат к низу страницы

Нашел в сети следующий рабочий пример, добавляю к нему внутрь #content #left и #right но из-за свойства float: left весь эффект прижаточти футера пропадает. Как быть?

<!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" lang="ru">
<head>
	<title>Прижимаем футер к низу страницы</title>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="#" />
<style type="text/css">
	html, body {margin:0;padding:0;width:100%;height:100%;}
	#content {position:relative; min-height:100%;height:auto !important;height:100%;padding:0 80px; color: #646464; text-align: justify;}
	#content p {padding:10px 0; margin: 0;}
	#content .empty {height:100px; }
	h1 { margin: 0; padding:20px 0 0 }
	#footer {position:relative; margin-top:-100px; height:90px; width:100%; background:#646464; border-top:10px solid #389DC3}
#left{float: left;}
#right{position:relative; margin-left: 600px;}
</style>
</head>
<body>
	<div id="content">
		<h1>Прижимаем футер к низу страницы</h1>

		<div id="#left">1</div>
		<div id="#right">2</div>

		<div class="empty"></div>
	</div>
	<div id="footer"></div>
</body>
</html>

s0rr0w · December 5, 2008

Здравствуйте, не получается реализовать следующее:

На этом сайте есть вариант решения данной задачи. Да и Гугль может выдать мешок ссылок по данной теме с десятком реализаций.

Следующий.

Sign In

Прижатый футер + еще кое-что

Question

Samborsky

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information