Плавающий правый элемент помещает следующий элемент в IE7 - PullRequest
Новая
       7

Плавающий правый элемент помещает следующий элемент в IE7

3 голосов
/ 23 февраля 2012

Я пытаюсь создать простую разметку с заголовком + контентом + нижним колонтитулом + боковой панелью. Боковая панель должна находиться над заголовком и элементом содержимого, и если она выше содержимого, она должна сдвинуть нижний колонтитул (например, так: http://jsfiddle.net/gWLFN/7/).

HTML: 

<div id="wrapper">
    <div id="sidebar">sidebar</div>
    <div id="header">header</div>
    <div id="content">content</div>
    <div style="clear:both"></div>
    <div id="footer">footer</div>
</div>

CSS: 

#wrapper { width:500px }
#header { width:500px; height:100px; background-color:red }
#content { width:500px; height:300px; background-color:green }
#footer { width:500px; height:100px; background-color:blue }
#sidebar { 
    float:right; 
    margin-top:50px; 
    width:100px; 
    height:500px; 
    background-color: yellow; 
    border:1px solid white;
}

Проблема в том, что в IE7 боковая панель отталкивает другие элементы. Я думаю, это потому, что общая ширина заголовка + боковой панели больше, чем ширина оболочки. Я нашел много постов о float: right в IE7, но все они для ширины, которая не превосходит обертку.

Я выбрал float: right вместо абсолютного позиционирования, потому что положение нижнего колонтитула должно зависеть от высоты боковой панели (если кто-то знает, как это сделать с абсолютным позиционированием, идеально!).

Буду признателен за любую идею, чтобы решить эту проблему.

1 Ответ

1 голос
/ 23 февраля 2012

Вы почти у цели, порядок структуры HTML немного запутан, и вы используете CSS ширину, а не позволяете браузеру работать наилучшим образом.

Вы можете удалить значения width из вложенных классов CSS (кроме #sidebar), так как по умолчанию они занимают любую оставшуюся ширину, если только она не указана. Тогда вам просто нужно поменять местами #header и #sidebar в структуре HTML, и вы в значительной степени отсортированы.

Обратите внимание, что поскольку мы поменялись местами #header и #sidebar, margin-top в #sidebar был изменен.

CSS 

#wrapper { 
    width:500px;
}

#header {
    height:100px;
    background-color:red;
}

#content {
    height:300px;
    background-color:green;
}

#footer {
    height:100px;
    background-color:blue;
}

#sidebar { 
    float:right; 
    margin-top: -50px; /*changed this to -50px */ 
    width:100px; 
    height:500px; 
    background-color: yellow; 
    border:1px solid white;
}

HTML 

<div id="wrapper">
    <div id="header">header</div>
    <div id="sidebar">sidebar</div>
    <div id="content">content</div>
    <div style="clear:both"></div>
    <div id="footer">footer</div>
</div>

Рабочий пример: http://jsfiddle.net/gnx2z/

...