Перекрытие дивов - HTML и CSS

masashama · 06.02.2012, 18:18

Привет всем. Подскажите почему блок контент перекрывает блок футера, а меню в свою очередь под блоком футера, когда я у контента убираю обтекание все становится супер но это вообще не вариант.
Собственно код

Код HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тест</title>
	<style>
	   html, body{
	       		  margin:0;
			  padding:0; 
		          height:100%;
	       		 }
       #conteiner{
	                background-color:#0ef;
			height:100%;
			overflow:hidden;
	             }	
       #content{
	             /**/background-color:#f00;
		     /**/float:left;
		     /**/width:70%;
		     /**/height:100%;
		      **/margin-bottom:-50px;
		     /**/overflow:hidden;
				 
	           }

	#right{
	         /* */background-color:#0f0;
		        margin-left:70%;
		        height:100%;
		        overflow:hidden;
			margin-bottom:-50px;
	           }
        #footer{
		         background-color:#00f;
			 height:50px;
		   /**/clear:both;
			 overflow:hidden;
		       }			   
	</style>
</head>

<body>

<div id="conteiner">
	<div id="content">Контент</div>
	<div id="right">Меню</div>
	<div id="footer">Футер</div>
</div>

</body>	
</html>

JTG · 06.02.2012, 19:56

Одинаковая высота колонок и прилипающий футер - в некотором роде взаимоисключающие вещи, просто так эта задача без танцев с бубном или JS не решается.

Если делать очевидным способом - колонки заползают под футер, засунуть внутрь контейнер с margin-bottom: 50px не выйдет: http://jsfiddle.net/aPEMR/3/

Можно поковырять http://habrahabr.ru/blogs/css/81193, но там каша из тегов + проблемы с якорями и изменением высоты браузера

Без прилипающего футера всё намного проще, например
http://matthewjamestaylor.com/blog/p...right-menu.htm
http://csstemplater.com/

masashama · 06.02.2012, 20:28

Большое спасибо, четко и понятно =) Благодарствую.

06.02.2012, 19:56	#2
JTG я получил эту роль Старожил Регистрация: 25.05.2007 Сообщений: 3,694	Одинаковая высота колонок и прилипающий футер - в некотором роде взаимоисключающие вещи, просто так эта задача без танцев с бубном или JS не решается. Если делать очевидным способом - колонки заползают под футер, засунуть внутрь контейнер с margin-bottom: 50px не выйдет: http://jsfiddle.net/aPEMR/3/ Можно поковырять http://habrahabr.ru/blogs/css/81193, но там каша из тегов + проблемы с якорями и изменением высоты браузера Без прилипающего футера всё намного проще, например http://matthewjamestaylor.com/blog/p...right-menu.htm http://csstemplater.com/ пыщь Последний раз редактировалось JTG; 06.02.2012 в 20:26.

06.02.2012, 20:28	#3
masashama Учусь слушать Пользователь Регистрация: 30.01.2011 Сообщений: 66	Большое спасибо, четко и понятно =) Благодарствую. Люблю программировать =)

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
перекрытие функции с++	tanek	Помощь студентам	1	20.09.2011 19:34
PaintBox. Перекрытие изображений	_-Re@l-_	Общие вопросы Delphi	2	13.05.2011 15:26
Перекрытие прерывания	Dimon12345	Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM	3	03.12.2010 18:30
выравнивание дивов	tazododu	HTML и CSS	2	12.03.2010 17:16
как сделать один из дивов центральным и с заданной шириной	Arassir	HTML и CSS	3	22.01.2010 19:57