Проблема с отступами блоков

andrecool · May 24, 2011

Между блоком footer и блоками content,right нужен отступ в 100px. Но в IE 6 при увеличении текста в блоке content отступ примерно 56рх.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title></title>
<!--[if lte IE 6]>
<style type="text/css">
* html #wrap {width: expression((documentElement.clientWidth||document.body.clientWidth)<980?'980px':'');}
</style>
<![endif]--> 
<style type="text/css"> 

html, body {
margin : 0;
padding : 0;
}
body {
font : 75% Arial, Helvetica, sans-serif;
}
#wrap { 
width: 100%; 
} 
#header { 
width: 100%;
height : 195px;
background : #d8d8bf url(header.gif) repeat-x; 
}
#main { 
width: 980px; 
margin: 0 auto;
padding:0; 
} 
#content { 
padding:10px;
margin-bottom:100px;
background : #006699;
width: 730px; 
float: left; 
} 
#right { 
padding:10px;
margin-bottom:100px;
width: 200px; 
float: right;
color: #006699;
background : #CCCCCC; 
} 
#footer {
color : #000;
clear : both;
width : 100%;
height: 100px;
background: #e8e8e8;
} 

</style> 
</head> 
<body> 
<div id="wrap"> 
<div id="header">Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка </div>
<div id="main"> 
<div id="content">D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент </div>

<div id="right">Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка </div> 
</div> 
<div id="footer">Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал </div>
</div> 
</body> 
</html>

Bonzash · May 24, 2011

Попробуй так:

<div id="main"> 
<div id="content"></div>
<div id="right"></div> 
<div style="clear: both;"></div>
<div id="footer"></div>
</div>

Не увидел, у тебя уже стоит свойство.

Edited May 24, 2011 by Bonzash

Great Rash · May 24, 2011

#footer {margin: 100px 0 0;}

А у #content и #right уберите margin-bottom.

andrecool · May 24, 2011

On 5/24/2011 at 12:51 PM, Great Rash said:
#footer {margin: 100px 0 0;}
А у #content и #right уберите margin-bottom.

Я так побывал, в IE все работает, но в остальных браузерах отступ вообще пропадает.

Great Rash · May 24, 2011


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title></title>
<!--[if lte IE 6]>
<style type="text/css">
* html #wrap {width: expression((documentElement.clientWidth||document.body.clientWidth)<980?'980px'
:'');}
</style>
<![endif]--> 
<style type="text/css"> 

html, body {
margin: 0;
padding: 0;
}
body {
font: 75% Arial, Helvetica, sans-serif;
}
#header {
height : 195px;
background : #d8d8bf url(header.gif) repeat-x; 
}
#main { 
width: 980px; 
margin: 0 auto;
padding:0; 
} 
#content { 
padding:10px;
background : #006699;
width: 730px; 
float: left; 
} 
#right { 
padding:10px;
width: 200px; 
float: right;
color: #006699;
background : #CCCCCC; 
} 
#footer {
color : #000;
height: 100px;
background: #e8e8e8;
}
.clear {
	clear: both;
	height: 100px;
}

</style> 
</head> 
<body> 
<div id="wrap"> 
<div id="header">Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка Шапка </div>
<div id="main"> 
<div id="content">D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D D Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент </div>

<div id="right">Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка Правая колонка </div> 
</div>
<div class="clear"></div>
<div id="footer">Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал Подвал </div>
</div> 
</body> 
</html>

andrecool · May 24, 2011

On 5/24/2011 at 1:03 PM, Great Rash said:
С дополнительным блоком
<div class="clear"></div>
стало лучше.
А если записать так:
.clear {
clear: both;
height: 100px;
width: 980px;
}
То эту запись

можно вообще удалить!
Спасибо за помощь!

Edited May 24, 2011 by andrecool

andrecool · May 24, 2011

On 5/24/2011 at 12:41 PM, Bonzash said:
<div style="clear: both;"></div>
Спасибо за подсказку!

Edited May 24, 2011 by andrecool

Sign In

Проблема с отступами блоков

Question

andrecool

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Bonzash

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

andrecool

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

andrecool

Link to comment

Share on other sites

andrecool

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information