float left / margin для двух статических div ширины (т.е. 6) - PullRequest
Новая
       56

float left / margin для двух статических div ширины (т.е. 6)

0 голосов
/ 26 августа 2011

Хорошо, у меня есть следующий макет / CSS: 

div#wrap {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 1400px;
}

div#header {
    float: left;
    margin: 50px 15px 0 50px;
    width: 135px;
}


div#blog {
    display: inline;
    float: left;
    margin: 50px 15px 0 50px;
    width: 1080px;
}

div#site {
    float: left;
    width: 100%;
}

с: 

<div id="site">
   <div id="wrap">
      <div id="header"></div>
      <div id="blog"></div>
   </div>
</div>

Итак, сайт закрывает окно, «wrap» имеет фиксированную ширину и центрируется, а «header» и «blog» находятся внутри «wrap» с определенной шириной.

Проблема, как обычно, с IE6. «блог» отображается под заголовком. Похоже, что float и / или margin не работают.

Кажется, что это не ошибка с плавающей запятой с двумя полями, по крайней мере, в DebugBar я вижу правильные поля, но также есть некоторые смещения (50px для заголовка), которые я не знаю, что это на самом деле. Во всяком случае, я попытался добавить display: inline и в заголовок, и в блог, и это не помогло.

У меня нет ie7, чтобы увидеть, но это правильно показывает в ie8.

Я прошел несколько уроков по плавающим ошибкам для ie6, но не смог найти решение для своей проблемы (или я мог его пропустить).

Любые идеи, как «исцелить» его без добавления дополнительных div-ов (я надеюсь, что это возможно с css, как с ошибкой doublemargin)

p / s / общая ширина div с полем составляет 1345 <1400. </p>

EDIT1: единственное, что странно, это то, что 'wrap' имеет 0 высоту.

Ответы [ 2 ]

1 голос
/ 26 августа 2011

EDIT1: единственное, что странно, это то, что 'wrap' имеет 0 высоту.

Пожалуйста, прочитайте http://www.quirksmode.org/css/clearing.html. Однако описанная проблема не появляется в IE6 из-за другой ошибки; Поплавки автоматически очищаются.

Кроме того, чтобы избежать ошибки двойного поля, убедитесь, что вы определили display:inline для всех плавающих элементов. Не добавляйте display: inline к #wrap, это вызовет предыдущую проблему (#blog появится в #header).

edit: мне удалось воспроизвести проблему на сайте reznikdavydov.com. Внутри #header находится <div class=menu> с набором width: 300px. Ошибка в IE6 приводит к тому, что оболочка (#header) неправильно развернута, поэтому div.menu не может переполниться из нее. По этой причине #header и #blog не могут соответствовать друг другу: вычисленное с #header составляет 135 пикселей в современном браузере, но 300 пикселей в IE6. Решение состоит в том, чтобы удалить правило width:300px из селектора .menu.

0 голосов
/ 26 августа 2011

кажется, что вам не нужен CSS, я бы начал отсюда и посмотрел, работает ли он 

div#wrap {
    margin:0 auto;
    width: 1400px;
}

div#header {
    float: left;
    margin: 50px 15px 0 50px;
    width: 135px;
}


div#blog {
    float: left;
    margin: 50px 15px 0 50px;
    width: 1080px;
}

div#site {
    width: 100%;
}
...