Не изменяет свою высоту DIV с указанным min-height - HTML и CSS

RelaX Inc. · 18.07.2012, 13:34

У меня не изменяет свою высоту DIV с указанным для него min-height. Возможно это из-за фиксированного фона.

Вот коды:

HTML:

Код HTML:

<!DOCTYPE html>
<html>
	<head>
		<title>My blog</title>
		<link href="style/main.css" rel="stylesheet">
		<link href="style/other.css" rel="stylesheet">
	</head>
	<body>
		<div id="main">
			<div id="header">
				<div class="logo"><?php include "./modules/logo.tpl"; ?></div>
				<div class="nav"><?php include "./modules/nav.tpl"; ?></div>
			</div>
			<div id="content-main">
				<div id="content">
					<?php include "./modules/content.tpl"; ?>
				</div>
				<div id="footer"><div style="padding: 12px;">
					<?php include "./modules/footer.tpl"; ?>
				</div></div>
			</div>
		</div>
	</body>
</html>

CSS:

Код HTML:

body {
	background: #FFFFFF;
	margin: 0;
	padding: 0;
	color: #000000;
	font-family: Tahoma;
	font-size: 13px;
}

#main {
	background: #f6eaa9 url('../images/background.png') fixed top center repeat;
	width: 80%;
	margin: 0 auto;
	height: 100%;
	-webkit-box-shadow: 0px 0px 70px #000000; /* Safari, Chrome */
	-moz-box-shadow: 0px 0px 70px #000000; /* Firefox */
	box-shadow: 0px 0px 70px #000000;
}

#header {
	width: 80%;
	height: 110px;
	margin: 0 auto;
}

.logo {
	width: 30%;
	float: left;
	height: 110px;
	margin: 0 auto;
	font-family: Logo;
	font-size: 75px;
	color: #000000;
}

.nav {
	width: 70%;
	float: right;
	height: 50px;
	margin: 0 auto;
	background: #d3bd83;
	border-radius: 10px;
	margin-top: 20px;
	padding: 0;
	font-family:  Navigation;
	font-size: 27px;
}
	.nav ul {
		height: 50px;
		margin: 0;
		padding: 0;
		padding-left: 20px;
	}
	.nav ul li {
		list-style: none;
		float: left;
		display: block;
		height: 18px;
		padding: 3px;
		padding-left: 8px;
		padding-right: 8px;
		margin-top: 1px;
	}
	.nav ul li:hover {
		background: #f6eaa9;
		height: 42px;
	}

#content-main {
	width: 80%;
	margin: 0 auto;
	min-height: 600px;
}

#content {
	width: 85%;
	float: right;
	min-height: 500px;
	margin: 0 auto;
	background: #d3bd83;
	border-radius: 10px;
	margin-top: 30px;
	border: 1px solid #000000;
}

#footer {
	width: 85%;
	float: right;
	height: 40px;
	margin: 0 auto;
	background: #d3bd83;
	border-radius: 10px;
	margin-top: 25px;
	border: 1px solid #000000;
	text-align: center;
}

.new {
	width: 100%;
	min-height: 100px;
	margin: 0 auto;
	border: 1px solid #f6eaa9;
	border-radius: 10px;
	background: #F6EAA9;
}

.title-new {
	width: 100%;
	height: 49px;
	margin: 0 auto;
	color: #000000;
	font-family: Navigation;
	font-size: 30px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.text-new {
	width: 100%;
	min-height: 50px;
	margin: 0 auto;
	font-family: Text-new;
	font-size: 14px;
}

.other-new {
	width: 95%;
	height: 20px;
	margin: 0 auto;
	border-top: 1px solid #c28d3b;
	color: #000000;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	font-size: 10px;
	}

Второй CSS(правда он и не влияет...):

Код HTML:

a:link, a:visited {
	color: #000000;
	text-decoration: none;
	}
a:hover {
	color: #c28d3b;
	text-decoration: none;
	}

@font-face {
	font-family:  Logo;
	src: url('fonts/logo.ttf');
}

@font-face {
	font-family:  Navigation;
	src: url('fonts/nav.ttf');
}

@font-face {
	font-family:  Title;
	src: url('fonts/title.ttf');
}

@font-face {
	font-family:  Text-new;
	src: url('fonts/text-new.ttf');
}

Скриншот в прикреплении.

P.S. Блоки были сначала другие(на HTML 5), но я думал не работает, поэтому изменил.

RelaX Inc. · 19.07.2012, 10:12

Нет, ну я конечно понимаю, что вопрос сложный, но ведь не на столько же, чтобы его не могли решить на специализированном форуме... Просмотров море, а ответа ни одного...

Cronos20 · 19.07.2012, 10:47

а вы думаете много желающих из 3-х кусков html и css собирать страницу и тестить ?
попробуйте float: right убрать у нужного блока

RelaX Inc. · 19.07.2012, 11:14

Cronos20, не обязательно тестировать. Возможно ведь это и популярная проблема. Я же не знаю. Ну и по тестировать тоже можно, раз это раздел помощи.

Ну а по теме. Если я уберу float: right;, то действительно работает, но как мне прижать #content и #footer к правому краю #content-main?

Cronos20 · 19.07.2012, 14:21

выравнивание блока возможно с помощью margin(-left,-right) : auto
а с высотой float борются размещая ниже пустой div с clear: both

RelaX Inc. · 19.07.2012, 14:40

Cronos20, огромное спасибо. Работает. Данный способ взял на заметку. Тему можно закрывать.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как сделать блок на всю высоту окна минус высоту шапки и футера	Qaliti	HTML и CSS	3	19.07.2012 13:20
Как растянуть div на оставшуюся высоту родительского div'a?	Gans.7	HTML и CSS	0	01.04.2012 10:55
Проблема height в теге div	moshkin_ura	HTML и CSS	6	26.09.2011 20:16
Div - динамическая высота (height)	DNCH	HTML и CSS	4	27.09.2010 22:48
div на всю высоту ячейки	Nikolay 0001	JavaScript, Ajax	5	30.11.2008 12:14

19.07.2012, 10:12	#2
RelaX Inc. Пользователь Регистрация: 15.01.2012 Сообщений: 52	Нет, ну я конечно понимаю, что вопрос сложный, но ведь не на столько же, чтобы его не могли решить на специализированном форуме... Просмотров море, а ответа ни одного...

19.07.2012, 10:47	#3
Cronos20 Форумчанин Регистрация: 08.07.2010 Сообщений: 679	а вы думаете много желающих из 3-х кусков html и css собирать страницу и тестить ? попробуйте float: right убрать у нужного блока

19.07.2012, 11:14	#4
RelaX Inc. Пользователь Регистрация: 15.01.2012 Сообщений: 52	Cronos20, не обязательно тестировать. Возможно ведь это и популярная проблема. Я же не знаю. Ну и по тестировать тоже можно, раз это раздел помощи. Ну а по теме. Если я уберу float: right;, то действительно работает, но как мне прижать #content и #footer к правому краю #content-main?

19.07.2012, 14:21	#5
Cronos20 Форумчанин Регистрация: 08.07.2010 Сообщений: 679	выравнивание блока возможно с помощью margin(-left,-right) : auto а с высотой float борются размещая ниже пустой div с clear: both

19.07.2012, 14:40	#6
RelaX Inc. Пользователь Регистрация: 15.01.2012 Сообщений: 52	Cronos20, огромное спасибо. Работает. Данный способ взял на заметку. Тему можно закрывать.