Проблема с padding у clear:both

savinzeek · July 16, 2011

Добрый день. Есть интересная проблема.

У меня плавающие блоки, всем задан float, а после этих блоков идет блок с clear:both

Как всегда во всех браузерах все ок, а вот IE....

<!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" xml:lang="ru">
<html>
<head>
<title>Goodzabox-Текущие доставки</title>
<link rel="stylesheet" type="text/css" href="ex_1.css" media="all"/>
</head>
<body>
	<div id="padding_5">
		<div class="left item">
			Photo
		</div>
		<div class="left item">
			Price
		</div>
		<div class="left item">
			BamBam
		</div>
		<div class="clear_both">
		</div>
	</div>
</body>
</html>

Это CSS

BODY{
	margin:0;
	font:12px Arial, sans-serif;
	color:#000;
}
#padding_5{
	width:640px;
	background-color:#dedede;
	padding:5px;
	border:1px solid black;
}
.item{
	width:200px;
	background-color:#fff;
	margin:0 5px;
	border:1px solid black;
}
.left{
	float:left;
}
.clear_both{
	clear:both;
	padding:0px;
}

Так вот вопрос, почему IE добавляет padding для блока с clear:both

Как это стоит обойти может кто-то знает.

Да, можно заменить один padding у родителя и добавить margin дочерним, но просто это упрощенный пример и дочерние

блоки могут иметь разные id/class и каждому добавлять margin не хочется.

Может есть универсальный способ.

Принудительный padding:0 для clear_both ничего не дал.

Gaspode · July 16, 2011

Как насчёт поставить overflow: hidden для обёртки и вообще выбросить этот блок с clear: both?

jumancy · July 18, 2011

лучший способ обойти без clear: both. но если он необходим то попробуй для него писать не padding: 0 а height: 0

savinzeek · July 18, 2011

Да, height:0 сработало. Такое решение мне подходит.

Спасибо.

Justnewone · July 18, 2011

Добавьте ему же еще overflow:hidden от греха подальше, не повредит

Sign In

Проблема с padding у clear:both

Question

savinzeek

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Gaspode

Link to comment

Share on other sites

jumancy

Link to comment

Share on other sites

savinzeek

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information