Проблема с CSS параметром float в div боксах

dav · 17.12.2006, 23:32

Создаю html файл с тремя div-ами вложенными в другой (header), с целью, чтобы top_left и top_right (см. код ниже) имели фиксированный размер и располагались по бокам центрального - top_middle. Центральный div (top_middle) должен растягиваться и занимать все доступное пространство между левым и правым. Приведенный код в Opera отображается как и ожидалось, а вот в IE центральный div почемуто имеет меньший размер и появляются пробелы между левым и правым (см. рисунок). Подскажите в чем может быть баг ?

Файл html:

PHP код:


			
<html>



<head>

  <title>Box</title>

  <link rel="stylesheet" href="style.css" type="text/css" />

</head>



<body>

    <div id="header">

        <div id="top_left"></div>

        <div id="top_right"></div>

        <div id="top_middle"></div>

    </div>

</body>



</html>

Файл style.css:

PHP код:


			
BODY {

    BACKGROUND: #a8a8a8 no-repeat 100% 100%;

    COLOR: #62624b;

    FONT-FAMILY: Arial, Helvetica, Verdana, sans-serif;

    margin: 0px;

    padding: 0px;

}







div#header {

    clear:   both;

    height:  18px;

    width: 500px;

    padding: 0px;

    margin:  0px;

}







div#top_left {

    float:  left;

    height: 18px;

    width:  18px;

    padding: 0px;

    margin:  0px;

    border: 1px solid red;

}



div#top_right {

    float:  right;

    height: 18px;

    width:  18px;

    padding: 0px;

    margin:  0px;

    border: 1px solid blue;

}



div#top_middle {

    height:  100%;

    padding: 0px;

    margin-left:   18px;

    margin-right:  18px;

    border: 1px solid green;

}

dav · 18.12.2006, 14:03

Все, нашел решение, тема закрыта.

Вот style.css файл, исправляющий баг 3-ех pixel-ного отступа, возникающего у элементов c заданным float: left при просмотре в IE.

PHP код:


			
BODY { 

    BACKGROUND: #a8a8a8 no-repeat 100% 100%; 

    COLOR: #62624b; 

    FONT-FAMILY: Arial, Helvetica, Verdana, sans-serif; 

    margin: 0px; 

    padding: 0px; 

} 







div#header { 

    clear:   both; 

    height:  18px; 

    width: 500px; 

    padding: 0px; 

    margin:  0px;

} 







div#top_left { 

    float:  left; 

    height: 18px; 

    width:  18px; 

    padding: 0px; 

    margin:  0px; 

    margin-right: -18px;   // <<-- fix 3 pixels 'float: left' for IE 

    border: 1px solid red; 

} 



div#top_right { 

    float:  right; 

    height: 18px; 

    width:  18px; 

    padding: 0px; 

    margin:  0px;

    margin-left:  -18px;  // <<-- fix 3 pixels 'float: left' for IE 

    border: 1px solid blue; 

} 



div#top_middle { 

    height:  18px; 

    padding: 0px; 

    margin-left:   18px; 

    margin-right:  18px; 

    border: 1px solid green; 

}

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
CSS (float) Цвет не ложится полностью	Ван	HTML, CSS, JavaScript	7	13.03.2015 13:41
Проблема с float в IE 6-7	Apologet	HTML, CSS, JavaScript	1	21.03.2012 20:34
Странно себя ведет float: left	dima_kiv	HTML, CSS, JavaScript	2	04.05.2011 11:32
float и position проблема	life24x7	HTML, CSS, JavaScript	9	19.09.2009 13:42
Float и valign	adbared	HTML, CSS, JavaScript	7	04.06.2008 18:10

17.12.2006, 23:32	#1
dav	Создаю html файл с тремя div-ами вложенными в другой (header), с целью, чтобы top_left и top_right (см. код ниже) имели фиксированный размер и располагались по бокам центрального - top_middle. Центральный div (top_middle) должен растягиваться и занимать все доступное пространство между левым и правым. Приведенный код в Opera отображается как и ожидалось, а вот в IE центральный div почемуто имеет меньший размер и появляются пробелы между левым и правым (см. рисунок). Подскажите в чем может быть баг ? Файл html: PHP код: `<html> <head> <title>Box</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="header"> <div id="top_left"></div> <div id="top_right"></div> <div id="top_middle"></div> </div> </body> </html>` Файл style.css: PHP код: BODY { BACKGROUND: #a8a8a8 no-repeat 100% 100%; COLOR: #62624b; FONT-FAMILY: Arial, Helvetica, Verdana, sans-serif; margin: 0px; padding: 0px; } div#header { clear: both; height: 18px; width: 500px; padding: 0px; margin: 0px; } div#top_left { float: left; height: 18px; width: 18px; padding: 0px; margin: 0px; border: 1px solid red; } div#top_right { float: right; height: 18px; width: 18px; padding: 0px; margin: 0px; border: 1px solid blue; } div#top_middle { height: 100%; padding: 0px; margin-left: 18px; margin-right: 18px; border: 1px solid green; }

18.12.2006, 14:03	#2
dav	Все, нашел решение, тема закрыта. Вот style.css файл, исправляющий баг 3-ех pixel-ного отступа, возникающего у элементов c заданным float: left при просмотре в IE. PHP код: BODY { BACKGROUND: #a8a8a8 no-repeat 100% 100%; COLOR: #62624b; FONT-FAMILY: Arial, Helvetica, Verdana, sans-serif; margin: 0px; padding: 0px; } div#header { clear: both; height: 18px; width: 500px; padding: 0px; margin: 0px; } div#top_left { float: left; height: 18px; width: 18px; padding: 0px; margin: 0px; margin-right: -18px; // <<-- fix 3 pixels 'float: left' for IE border: 1px solid red; } div#top_right { float: right; height: 18px; width: 18px; padding: 0px; margin: 0px; margin-left: -18px; // <<-- fix 3 pixels 'float: left' for IE border: 1px solid blue; } div#top_middle { height: 18px; padding: 0px; margin-left: 18px; margin-right: 18px; border: 1px solid green; }