Jump to content
  • 0

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

copyright

Asked by copyright,

 Share

Question

copyright Explorer

copyright

Posted
Posted

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

Мои познания = 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}

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
Great Rash Explorer

Great Rash

Posted
Posted

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


<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: из Германии что-ли?

Link to comment
Share on other sites
  • 0
copyright Explorer

copyright

Posted
  • Author
Posted (edited)

Пробовал по разному. В ИЕ 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 by copyright
Link to comment
Share on other sites
  • 0
copyright Explorer

copyright

Posted
  • Author
Posted

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

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

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

Link to comment
Share on other sites
  • 0
ceil100 Explorer

ceil100

Posted
Posted (edited)

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

в этом браузере добавляется отступ 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 by ceil100
Link to comment
Share on other sites
  • 0
copyright Explorer

copyright

Posted
  • Author
Posted (edited)

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

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

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

================== скипано =========================

либо вот такЖ

================== скипано =========================

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

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

Edited by copyright
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept