Три блока div (три колонки) в одном (IE6)

[tarkinsky]

Уже два дня мучаюсь с проблемой... Во всех браузерах приведенный ниже код, нормально растягивает средний блок div (синий) на 100%, а в IE 6 по краям получаются какие то отступы (при разрешении 1280х1024). Подскажите плиз в чем может быть дело?

Вот код:

<div id="header">
       <a href="pa1.ru" title="Строительная компания" style="text-decoration: none;">
        <div id="header1">
        </div></a>
        <div id="header2">
        </div>
        <div id="header3">
        </div>
     </div>

     <div id="header_sign">
      постройка домов, бань
     </div>
     <div id="logo_sign">
      <strong>Cтроительная компания</strong>
     </div>

Код CSS:

#header_sign{
  position: absolute;
  left: 192px;
  top: 152px;
  width: 330px;
  font-family: 'Tahoma';
  font-size: 75%;  
  color: #444;
}

#logo_sign{
  position: absolute;
  left: 756px;
  top: 150px;
  width: 252px;
  font-family: 'Verdana';
  font-style: italic;
  font-size: 90%;  
  color: white;
}


#header{
  overflow: hidden;
}
#header, #header1, #header2, #header3{
 height: 188px;
}
#header1{
   background: green;
  width: 746px;
  float: left;
  overflow: hidden;
  border: 1px solid black;
  margin: 0px;
  padding: 0px;
}
#header2{
 float: right;
 background: red;
 overflow: hidden;
 width: 239px;
 margin: 0px;
 padding: 0px; 
 border: 1px solid black;
}
#header3{
  margin-left: 746px;
  margin-right: 239px; 
  width: auto;
   background: blue;
  border: 1px solid black;
  height: 100%;
}

Изображение в IE6:

Изображение в firefox:

[alex_anderr]

Если вам

body {margin:0; padding:0;}

не поможет, то самый лучший совет будет - забить на ie6, им пользуются несколько человек и половина из них верстальщики.

[Mihail]

На самом деле это не баг, а несколько странное взаимодействие элементов в IE6, обтекание срабатывает не совсем корректно, думал проблема связанна с hasLayout, но как оказалось нет, раньше я на это внимание не обращал, решил разобраться, проблема происходит когда любому элементу задать фиксированную высоту, если уберете везде свойство height то проблема исчезнет, если все-же нужна фиксированная высота попробуйте сделать так:

css

* {
	margin: 0;
	padding: 0;
}

#wrapper {
	width:900px;
	margin: 0 auto;
}

#main {
	width: 100%;
}

#middle {
	width:100%;
	float:left;
	overflow:hidden;
}


#content {
	padding:0 200px 0 200px;
	height:300px;
	background:#CC99CC;
}

#Left_Sidebar {
	float:left;
	width:200px;
	height:300px;
	margin-left:-100%;
	background:#00CCFF;

}

#Right_Sidebar {
	float:left;
	width:200px;
	height:300px;
	margin-left:-200px;
	background: #FFACAA;
}

ie6

<!--[if lte IE 6]>
<style type="text/css">
#Left_Sidebar, #Right_Sidebar, #main {
	position:relative;
}

#main {
	height: 1%;
}
</style>
<![endif]-->

html

<div id="wrapper">
	<div id="main">
		<div id="middle">
			<div id="content">Текст</div>
		</div>
		<div id="Left_Sidebar">Левая колонка</div>
		<div id="Right_Sidebar">Правая колонка</div>
	</div>
</div>