Почему не растягивается div

Aidyn · April 11, 2014

Добырй день! Я начинающий, потому не судите строго

Не могу понять, почему div, в котором расположен еще div, имеет высотку 0 пикселей? Как его растянуть? Просто я хочу изображение на задний фон сделать, а оно не отражается, как я понял, как раз потому что высота div = 0.

кусок index.tpl

<body>.........	<!-- Шапка (The End)--> 	<!-- Вся страница --> 	<div id="main">		<!-- Основная часть --> 		<div id="content">                       	{include file='slider.tpl'}		        {$content}               	</div>		<!-- Основная часть (The End) -->                                             	</div>	<!-- Вся страница (The End)--> 		<!-- Футер -->	<div id="footer">		<a href="http://simplacms.ru">Скрипт интернет-магазина Simpla</a>	</div>	<!-- Футер (The End)--> 	</body>

кусок CSS

#main {	margin: 0px auto;	width: 1000px;}#content {	float: left;	width: 567px;	margin-bottom: 20px;}

надеюсь я понятно написал

Kublyakov · April 11, 2014

Пропишите в css

#main:after {content: '';display: table;clear: both;}

И почитайте про схлопывание зафлоаченных блоков)

Edited April 11, 2014 by Kublyakov

DragorWW · April 11, 2014

Потому что float: left;

Почитай про это свойство подробнее на сайте, про понятие потока.

а что бы решить проблему используй clear или .clearfix

Jekins · April 14, 2014

Добырй день! Я начинающий, потому не судите строго
Не могу понять, почему div, в котором расположен еще div, имеет высотку 0 пикселей? Как его растянуть? Просто я хочу изображение на задний фон сделать, а оно не отражается, как я понял, как раз потому что высота div = 0.

кусок index.tpl
<body>.........	 	 	<div id="main">		 		<div id="content">                       	{include file='slider.tpl'}		        {$content}               	</div>		                                             	</div>	 			<div id="footer">		<a href="http://simplacms.ru">Скрипт интернет-магазина Simpla</a>	</div>	 	</body>
кусок CSS
#main {	margin: 0px auto;	width: 1000px;}#content {	float: left;	width: 567px;	margin-bottom: 20px;}
надеюсь я понятно написал

У #content убери float: left;это значение означает обтикание элемента с правого края и фиксация его с левого.

Если же так сильно хочется оставить там float: left;, то к диву с #main добавь класс clearfix, а в стилях пропиши это:

.clearfix:after {

content: " "; /* Older browser do not support empty content */

visibility: hidden;

display: block;

height: 0;

clear: both;

}

Sign In

Почему не растягивается div

Question

Aidyn

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Kublyakov

Link to comment

Share on other sites

DragorWW

Link to comment

Share on other sites

Jekins

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information