IE и float

olya111 · February 27, 2009

Может, кто-нибудь встречался с подобной проблемой?

Буду очень благодарна, если поможете.

Я привожу код тестовой html-странички. Вкратце, на ней имеются два элемента h1 с float:left; и один элемент p. Во всех браузерах, кроме IE, элемент p "всплывает" наверх, только в IE ему что-то мешает. Непонятно, почему так происходит

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>float</title>
  <style type="text/css">
   .class1 {
	float:left;
	width:280px;
	height: 300px;
	background: green;
   }
   .class2 {
	float:left;
	width:280px;
	height: 300px;
	background: blue;
   }
   .class3 {
	padding-left: 280px;
	background: red;
   }
  </style>
 </head> 
 <body> 
<div style="width:500px;background:yellow;height:800px">  
	<h1 class="class1">sss</h1>
	<h1 class="class2">aaa</h1>
	<p class="class3">gggghf fff ff fffff fffffff ffffffff ffffff fff ffff fffff fffff ffff ff fffff fff fffff fff fffff fff fff fff fff ffffff ffff ffff fffff fffff ffffff fffff ffffff 
ffff ffffffffff ffffff fffff ffffff ffff ffff fffff fffffff ffff ffffff</p>
</div>
 </body>
</html>

Vlad · February 28, 2009

С float у IE большие проблемы, но в данном случае, мне кажется, он и не нужен. Можно через позиционирование все сделать. Код работает во всех браузерах.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>float</title>
  <style type="text/css">
   .class1 {
	float:left;
	width:280px;
	height: 300px;
	background: green;
	position: relative;
	margin: 0;
	z-index: 2;
   }
   .class2 {
	float:left;
	width:280px;
	height: 300px;
	background: blue;
	margin: 0;	
	position: relative;
	z-index: 2;
   }
   .class3 {
	padding-left: 280px;
	margin: 0;
	background: red;
	position: absolute;
	right: 0; top: 0;
   }
  </style>
</head>
<body>
<div style="width:500px;background:yellow;height:800px; position: relative">  
	<h1 class="class1">sss</h1>
	<h1 class="class2">aaa</h1>
	<p class="class3">gggghf fff ff fffff fffffff ffffffff ffffff fff ffff fffff fffff ffff ff fffff fff fffff fff fffff fff fff fff fff ffffff ffff ffff fffff fffff ffffff fffff ffffff
ffff ffffffffff ffffff fffff ffffff ffff ffff fffff fffffff ffff ffffff</p>
</div>
</body>
</html>

olya111 · March 2, 2009

Спасибо большое за совет! Может быть, так и сделаю.

Я вот только что методом тыка добавила к стилям h1

clear:both;

и контент начал подтягиваться вверх. Разумных объяснений пока не нахожу , я пробовала варианты от

display:inline-block

до

clear:none

...

Т.е. одно из решений - хотя бы к class2 добавить

clear:both

.

Vlad · March 2, 2009

Оля, ну к чему тебе метод тыка? Это как-то грубо и не по женски, что-ли. Почитай вначале, что указанные свойства делают - float создает обтекание; clear, наоборот, обтекание отменяет.

Razor · March 3, 2009

Насчет метода "тыка", как-то обнаружил, что к третьему элементу тоже нужно

float: left добавлять, тобишь если

   .class3 {
	float: left;
	padding-left: 280px;
	background: red;
   }

то в эксполрере он должен вспылть, на сколько я могу предполагать.

Sign In

IE и float

Question

olya111

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

olya111

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Razor

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information