Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

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

Обсуждение темы Проблема с CSS параметром float в div боксах в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Создаю html файл с тремя div-ами вложенными в другой (header), с целью, чтобы top_left и top_right (см. код ниже) имели фиксированный размер и ...


Закрытая тема
 
Опции темы
Старый 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-FAMILYArialHelveticaVerdanasans-serif;
    
margin0px;
    
padding0px;
}



div#header {
    
clear:   both;
    
height:  18px;
    
width500px;
    
padding0px;
    
margin:  0px;
}



div#top_left {
    
float:  left;
    
height18px;
    
width:  18px;
    
padding0px;
    
margin:  0px;
    
border1px solid red;
}

div#top_right {
    
float:  right;
    
height18px;
    
width:  18px;
    
padding0px;
    
margin:  0px;
    
border1px solid blue;
}

div#top_middle {
    
height:  100%;
    
padding0px;
    
margin-left:   18px;
    
margin-right:  18px;
    
border1px solid green;

 
Старый 17.12.2006, 23:32
Ссылки
Старый 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-FAMILYArialHelveticaVerdanasans-serif
    
margin0px
    
padding0px




div#header { 
    
clear:   both
    
height:  18px
    
width500px
    
padding0px
    
margin:  0px;




div#top_left { 
    
float:  left
    
height18px
    
width:  18px
    
padding0px
    
margin:  0px
    
margin-right: -18px;   // <<-- fix 3 pixels 'float: left' for IE 
    
border1px solid red


div#top_right { 
    
float:  right
    
height18px
    
width:  18px
    
padding0px
    
margin:  0px;
    
margin-left:  -18px;  // <<-- fix 3 pixels 'float: left' for IE 
    
border1px solid blue


div#top_middle { 
    
height:  18px
    
padding0px
    
margin-left:   18px
    
margin-right:  18px
    
border1px solid green

 
Старый 18.12.2006, 14:03
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
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


Текущее время: 14:26. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум