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

Question

Я пытаюсь создать простую разметку с заголовком + содержимое + нижний колонтитул + боковая панель. Боковая панель должна плавать над заголовком и элементом контента, и если она выше, чем содержимое, она должна подтолкнуть нижний колонтитул (например: 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: правильная проблема в IE7, но все они предназначены для ширины, которая не превышает оболочку.

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

Я хотел бы получить любую идею, чтобы решить эту проблему.

Answer 1

Вы почти находитесь, порядок структуры 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/