Проблема с поплавком CSS

Question

У меня проблема с поплавковыми div. я все попробовать, я везде искать, но я не могу найти (возможно, я использую неправильные ключевые слова для поиска, я не знаю)

здесь коды:

<div class="mbody"> 
<div class="mheader"> header content </div> 
<div class="mmenu"> menu content </div> 
<div class="mcontent"> 
    <div class="content-right"> 
    <div class="r-cont"> 
     <div class="r-cont-header"> header goes here </div> 
     <div class="r-cont-content"> <p>• There is a sample right content...</p></div> 
    </div> 
    </div> 
    <div class="content"> contents goes here </div> 
</div> <!-- mcontent ends here --> 
<div class="mfooter"> footer content </div> 
</div> <!-- mbody ends here --> 

и здесь идет CSS коды:

.mbody { 
    clear: both; 
    width: 920px; 
    position: relative; 
    overflow: visible; 
    height: auto; 
    margin: 0px auto; 
} 
.mheader { 
    height: 163px; 
    width: 856px; 
    background-image: url(img/header.png); 
    padding: 32px; 
} 
.mmenu { 
    height: 40px; 
    width: 920px; 
    background-image: url(img/menu-bg.png); 
} 
.mcontent { 
    width: 880px; 
    overflow: visible; 
    padding: 20px; 
    height: auto; 
    background-color: #FFF; 
    clear: both; 
} 
.content-right { 
    width: 200px; 
    float: right; 
} 
.content { 
    margin-right: 220px; 
} 
.r-cont { 
    clear: both; 
    width: 200px; 
} 
.r-cont .r-cont-header { 
    background-image: url(img/menu-head.png); 
    height: 32px; 
    width: 168px; 
    line-height: 32px; 
    color: #FFF; 
    padding-left: 32px; 
    font-weight: bold; 
    font-size: 16px; 
} 
.r-cont .r-cont-content { 
    background-color: #F8AF6B; 
    font-size: 12px; 
    padding: 6px; 
} 
.mfooter { 
    height: 60px; 
    width: 920px; 
    background-color: #F58220; 
    background-image: url(img/footer-bg.png); 
    clear: both; 
} 

здесь мы идем ...

если содержание .content является меньше, чем .content-вправо, высота .mcontent равна мин высоты m.content, так что я не ставил его. он равен прокладке .mcontent-top и bottom. оставшаяся область не имеет фона. Я не могу установить фон .mbody, потому что я использую закругленные углы с помощью JavaScript, и если я использую внешний угол фона, цвет цвета .mbody ...

Мои клиенты все еще используют ie6, поэтому я не могу использовать никаких эффектов css и css3 ...

заранее спасибо ...

Answer 1

.class1 .class2 вызывают проблемы в IE6 пытаются использовать #id1 .class1 как эти места .r-прод .r-прод-контент

Answer 2

Я думаю, что вы проблема - это то, что называется «рухнувшим» па аренда, т. е. контейнерный div не так высок, как содержание внутри.

Если это ваша проблема, то есть четыре решения. Я бы рекомендовал изменить переполнение значение вашего .mcontent div на скрыто (из видимых). Это решение совместимо с IE6, поскольку вы установили ширину родителя.

.mcontent {overflow: hidden;} 

Прочитайте раздел «Крепление Collapsed Родителя» по ссылке ниже для получения дополнительной информации (и других три решения):

http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/