IE7 поплавки исчезают, когда их родительский элемент находится в положении: relative

Question

Это проблема, с которой я столкнулся с IE7. Во всех других (более новых) браузерах это хорошо видно ... почему position:relative; повлияли на float: right; или float: left;? Есть ли способ сохранить position: relative, не жертвуя функциональностью float?

JS скрипку: http://jsfiddle.net/uW7JV/2/

Без position: relative;

С position: relative; (на красном поле)

Еще более обрезается вниз версия: http://jsfiddle.net/uW7JV/4/

Интересно ... Удаление <div class="clearboth"></div> позволяет t он доволен показать. Тем не менее, мне нужна эта функциональность, поэтому я все еще ищу исправление. http://jsfiddle.net/uW7JV/9/

Answer 1

Вам необходимо добавить overflow: hidden в .column-wrapper, чтобы он обертывал своих плавающих детей. После этого вам не понадобится раздел .clearboth div и CSS.

Другой вопрос, который вам нужно решить, это ширина столбцов, так как box-sizing: border-box не поддерживается в IE7, вам нужно учитывать ваше заполнение при назначении width.

div { 
    padding: 5px 1%; 
} 
.column-wrapper { 
    background: orange; 
    position: relative; 
    overflow: hidden; 
} 

.main { 
    background: yellow; 
    float: right; 
    width: 64.6%; 
} 
.sidebar { 
    float: left; 
    background: green; 
    width: 31.3%; 
} 

DEMO: http://jsfiddle.net/myajouri/uW7JV/15/

Другой способ пойти об этом, чтобы использовать Clearfix hack

.clearfix { 
    zoom: 1; /* for IE6/7 */ 
} 

.clearfix:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Затем добавьте clearfix класс .column-wrapper.