Как выровнять три блока для ИЕ 5.5 и 6 ?

copyright · October 17, 2011

Всем доброго здравия, хорошего дня и прекрасного настроения.

Мои познания = 0.0001. Прошу не пинать, а если все-таки, то, пожалуйста, не ногами и не по голове.

Вопрос.

Имеем три <div>. Задаем одному float:left, другому - float:right и отступ слева третьему и во всех браузерах они встают - как и ожидается - на одно линию по горизонтали. Однако в ИЕ 6 (и ниже) третий блок всегда смещается на "строку" - т.е. на высоту др. блока - вниз. Как с этим бороться?

Вот код:

HTML:

<body>
   <div id="div-raum">
      <div id="div-cont-links">
      </div>
      <div id="div-cont-mitte">
      </div>
      <div id="div-cont-rechts">
      </div>
   </div>
 </body>

Здесь CSS:

#div-raum {position:absolute; left:182px; top:47px; width:900px; height:510px; margin:0 0; padding:0; z-index:1;}

#div-cont-links {height:510px; width:207px; background:#a5b6a5; float:left}
#div-cont-mitte {height:510px; width:486px; background:#A5B6A5; margin-left:207}
#div-cont-rechts {height:510px; width:207px; background:#a5b6a5; float:right}

ceil100 · October 17, 2011

это что интересно за свойство: margin-left:207 ?

zSpx · October 17, 2011

#div-cont-mitte {margin: 0 207px;} и доктайп добавьте.

Great Rash · October 17, 2011

Все флоат-блоки должны идти до среднего, т.е. структура будет такая:


<body>
   <div id="div-raum">
      <div id="div-cont-links">
      </div>
      <div id="div-cont-rechts">
      </div>
      <div id="div-cont-mitte">
      </div>
   </div>
 </body>

UPD: из Германии что-ли?

copyright · October 17, 2011

Пробовал по разному. В ИЕ 6 и 5 не идет. :dash:

Все флоат-блоки должны идти до среднего, т.е. структура будет такая:
<body>
   <div id="div-raum">
      <div id="div-cont-links">
      </div>
      <div id="div-cont-rechts">
      </div>
      <div id="div-cont-mitte">
      </div>
   </div>
 </body>

Пробовал по разному. В ИЕ 6 и 5 не идет. :dash:

Edited October 17, 2011 by copyright

copyright · October 17, 2011

Все флоат-блоки должны идти до среднего, т.е. структура будет такая:

Причину выяснил, но не могу понять причину этой причины :blink:

В общем общая ширина <div-raum> = 900px. Если справа и слева блоки по 207px, то среднему остается 486px. Однако в ИЕ6 и ниже не проходит до тех пор пока не задашь одному из блоков на 6px меньше или общему блоку на 6px больше. Если задать среднему блоку 480px, то выравниваются на одну горизонтальную линию все три блока, но(!) справа и слева среднего блока остатся "щель", т.е. проглядывается фон. И даже если задать среднему блоку margin-left меньше ширины левого блока, то он остается стоять на расстоянии 3-ех px от него. Где, что необходимо подправить?

ceil100 · October 17, 2011

сделай уже центральный блок

в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении, заданном значением float.

так правильно:


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	#div-raum {position:absolute; left:182px; top:47px; width:900px; height:510px; margin:0 0; padding:0; z-index:1;}
	#div-cont-links {height:510px; width:207px; background:#a5b6a5; float:left}
	#div-cont-mitte {height:510px; width:480px; background:#A5B6A5; margin-left:207px;}
	#div-cont-rechts {height:510px; width:207px; background:#a5b6a5; float:right}

	</style>
</head>
<body>
   <div id="div-raum">
      <div id="div-cont-links">
      </div>
      <div id="div-cont-rechts">
      </div>
      <div id="div-cont-mitte">
      </div>
   </div>
</body>
</html>

либо вот такЖ


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	#div-raum {position:absolute; left:182px; top:47px; width:900px; height:510px; margin:0 0; padding:0; z-index:1;}
	#div-cont-links {height:510px; width:207px; background:#a5b6a5; float:left;margin-right:-3px;}
	#div-cont-mitte {height:510px;background:#f34fA5;}
	#div-cont-rechts {height:510px; width:207px; background:#a5b6a5; float:right;margin-left:-3px;}

	</style>
</head>
<body>
   <div id="div-raum">
      <div id="div-cont-links">
      </div>
      <div id="div-cont-rechts">
      </div>
      <div id="div-cont-mitte">
      </div>
   </div>
</body>
</html>

Edited October 17, 2011 by ceil100

copyright · October 18, 2011

сделай уже центральный блок
в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении, заданном значением float.
так правильно:
================== скипано =========================
либо вот такЖ
================== скипано =========================

Фу ты елы-палы! Ни в жизнь бы не догадался! Спасибо!

Т.е. фактически средний блок оставляем равным по ширине 900px (хотя можно и 486px задать), и убираем по -3px отступа блоков по бокам. Все очень просто. Еще раз спасибо.

ceil100 · October 18, 2011

всегда пожалуйста

Sign In

Как выровнять три блока для ИЕ 5.5 и 6 ?

Question

copyright

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

ceil100

Link to comment

Share on other sites

zSpx

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

copyright

Link to comment

Share on other sites

copyright

Link to comment

Share on other sites

ceil100

Link to comment

Share on other sites

copyright

Link to comment

Share on other sites

ceil100

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information