Как заставить div растянуться - HTML и CSS

tPORt · 04.09.2013, 13:49

Добрый день!
Не получается растянуть div элемент, в аттаче показано в чем дело и прилагаю код

Код HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">

<!--[if lt IE 9]> 
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

<link rel="stylesheet" href="/public/css/main.css">

</head>
<body>

<header>

	<div class="inner">
		<nav>
			<ul>
				<li><a href="#">email me</a></li>
				<li><a href="#">email me</a></li>
				<li><a href="#">email me</a></li>
			</ul>
		</nav>
	</div> <!-- /.inner -->


</header> <!-- /header -->

<div class="layer">


<div class="container">
 	
 	<div id="left-sidebar">
 		<ul>
			<li><a href="#">email me</a></li>
			<li><a href="#">email me</a></li>
			<li><a href="#">email me</a></li>
		</ul>
 	</div> <!-- /#left-sidebar -->
 	
 	<div id="right-sidebar">
 		<ul>
			<li><a href="#">email me</a></li>
			<li><a href="#">email me</a></li>
			<li><a href="#">email me</a></li>
		</ul>
 	</div> <!-- /#right-sidebar -->

 	<div id="content">
 		

My HTML Page Body goes here


 	</div> <!-- /#content -->

</div> <!-- /.container -->

</div> <!-- /.layer -->



</body>
</html>

------------
CSS

Цитата:

html, body, div, header, ul, li {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

a {
text-decoration: none;
color: blue;
}

a:hover {
text-decoration: underline;
}

header {
min-width: 960px;
background: red;
margin-bottom: 25px;
padding: 10px 0 10px 0;
}

header > .inner {
position: relative;
width: 960px;
margin: 0 auto;
background: green;
}

footer {
min-width: 960px;
background: red;
margin-bottom: 25px;
padding: 10px 0 10px 0;
}

footer > .inner {
position: relative;
width: 960px;
margin: 0 auto;
background: green;
}

body > .layer {
position: relative;
background: red;
min-width: 960px;
display: block;
padding: 10px 0 10px 0;
}

body > .layer > .container {
position: relative;
width: 960px;
margin: 0 auto;

}

#left-sidebar {
position: relative;
width: 200px;
float: left;
background: green;
}

#right-sidebar {
position: relative;
width: 300px;
float: right;
background: green;
}

#content {
position: relative;
margin: 0 310px 0 210px;
background: green;
}

Поясните пожалуйста почему body > .layer не тянется за элементами которые находятся в нем.

From Stilet: Оформил. Попрошу в следующий раз оформлять самостоятельно.

Smitt&Wesson · 04.09.2013, 14:48

Посмотрите вот ЗДЕСЬ.
Похоже проблема кроется в position: relative;. Поэкспериментируйте с ними.

tPORt · 04.09.2013, 15:00

к #left-sidebar и #right-sidebar применен float, если его убрать то body > .layer растягивается до конца со всеми внутренними элементами, но отображается все некорректно(((((

Попробовал применить абсолютное позиционирование к #left-sidebar и #right-sidebar и убрал у них float - получилось то же самое(((

Smitt&Wesson · 04.09.2013, 15:05

Экспериментируйте. Других причин, где можно было-бы накосячить я не заметил. Подождите на форуме, может светлая голова появится и заметит.

grominfo · 04.09.2013, 15:45

Немного не понял сути вопроса. Если речь идёт о том, что блок не тянется по высоте содержимого из-за того, что ему задали обтекание, то нужно поставить после кода:

Код:

</div> <!-- /#content -->

Поставить следующий код:

Код:

<div style="clear:both;"></div>

Вот пример

tPORt · 04.09.2013, 15:59

grominfo, то что доктор прописал!

Можете в 2х словах объяснить в чем тут дело?) Я не до конца понимаю почему так произошло((( В смысле я понимаю что clear:both отменяет обтекание, но как это влияет на body > .layer догнать не могу(

И в любом случае спасибо за подсказку!

grominfo · 04.09.2013, 16:05

Дело в не body > .layer, а в <div id="left-sidebar"> и <div id="right-sidebar">. Они имеют обтекание по левому и правому краю соответственно. Следовательно, если обтекание не отменить, то следующие за ними блоки будут их обтекать. Если в блоке, где расположены обтекаемые элементы, нужно разместить ещё одни элементы, то перед ними нужно отменить обтекание, так как обтекание будет работать для всех элементов в блоке, где есть хоть один элемент с float.

Smitt&Wesson · 04.09.2013, 16:11

Цитата:

Сообщение от grominfo

Поставить следующий код:

Да-да, я чёт и внимания не обратил.

tPORt · 04.09.2013, 16:17

Цитата:

Сообщение от grominfo

так как обтекание будет работать для всех элементов в блоке, где есть хоть один элемент с float.

Спасибо за подсказку!

Naive · 04.09.2013, 17:47

Обтекание продолжит работу и в других блоках ниже...
меня тут не было

04.09.2013, 14:48	#2
Smitt&Wesson Старожил Регистрация: 31.05.2010 Сообщений: 13,543	Посмотрите вот ЗДЕСЬ. Похоже проблема кроется в position: relative;. Поэкспериментируйте с ними. Пиши пьяным, редактируй трезвым. Справочник по алгоритмам С++ Builder

04.09.2013, 15:05	#4
Smitt&Wesson Старожил Регистрация: 31.05.2010 Сообщений: 13,543	Экспериментируйте. Других причин, где можно было-бы накосячить я не заметил. Подождите на форуме, может светлая голова появится и заметит. Пиши пьяным, редактируй трезвым. Справочник по алгоритмам С++ Builder

04.09.2013, 15:45	#5
grominfo Форумчанин Регистрация: 30.05.2011 Сообщений: 651	Немного не понял сути вопроса. Если речь идёт о том, что блок не тянется по высоте содержимого из-за того, что ему задали обтекание, то нужно поставить после кода: Код: `</div> <!-- /#content -->` Поставить следующий код: Код: `<div style="clear:both;"></div>` Вот пример Создание, программирование и сопровождение сайтов любой сложности. Изготовление программ на заказ. Список услуг и портфолио на сайте www.andreygrom.ru

04.09.2013, 15:59	#6
tPORt Регистрация: 04.09.2013 Сообщений: 5	grominfo, то что доктор прописал! Можете в 2х словах объяснить в чем тут дело?) Я не до конца понимаю почему так произошло((( В смысле я понимаю что clear:both отменяет обтекание, но как это влияет на body > .layer догнать не могу( И в любом случае спасибо за подсказку! Последний раз редактировалось tPORt; 04.09.2013 в 16:04.

04.09.2013, 16:05	#7
grominfo Форумчанин Регистрация: 30.05.2011 Сообщений: 651	Дело в не body > .layer, а в <div id="left-sidebar"> и <div id="right-sidebar">. Они имеют обтекание по левому и правому краю соответственно. Следовательно, если обтекание не отменить, то следующие за ними блоки будут их обтекать. Если в блоке, где расположены обтекаемые элементы, нужно разместить ещё одни элементы, то перед ними нужно отменить обтекание, так как обтекание будет работать для всех элементов в блоке, где есть хоть один элемент с float. Создание, программирование и сопровождение сайтов любой сложности. Изготовление программ на заказ. Список услуг и портфолио на сайте www.andreygrom.ru

04.09.2013, 15:00	#3
tPORt Регистрация: 04.09.2013 Сообщений: 5	к #left-sidebar и #right-sidebar применен float, если его убрать то body > .layer растягивается до конца со всеми внутренними элементами, но отображается все некорректно((((( Попробовал применить абсолютное позиционирование к #left-sidebar и #right-sidebar и убрал у них float - получилось то же самое(((

04.09.2013, 17:47	#10
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Обтекание продолжит работу и в других блоках ниже... меня тут не было Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
как заставить родительский div растягиваться по высоте дочернего	Arassir	HTML и CSS	9	16.10.2013 15:20
Как вывести со страницы определенный <div id="">то что вывести</div>	makar3000	PHP	6	11.08.2011 12:56
Windows-программа + web-обвязка, как связать и как заставить работать?	Человек_Борща	Общие вопросы по программированию, компьютерный форум	3	23.04.2011 19:07
div тег как нижний слой для второго div тега	dadli	HTML и CSS	2	30.07.2010 01:12
Как отменить прозрачность div в прозрачном div	zeharon	HTML и CSS	0	24.07.2010 16:56