CSS Float Problem

Question

i have a problem with float divs. i try everything, i search everywhere but i cannot find (maybe i use wrong keywords to search, i dont know)

here is the codes:

<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 -->

and here goes css codes:

.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;
}

here we go...

if .content's content is smaller then .content-right, .mcontent's heights is equal to m.content's min-height, so i didn't set it. it equals to .mcontent's padding-top and bottom. left out area has not any background. i cannot set .mbody background because i use rounded the corners with JavaScript and if i use a background corner's outside has the color of .mbody ...

my customers still use ie6, so i cannot any css effects and css3 codes...

thanks in advance...

Answer 1

.class1 .class2 cause problems in IE6 try to use #id1 .class1 like these places .r-cont .r-cont-content

Answer 2

I think you're problem is what's called the 'collapsed parent', i.e. the container div is not as tall as the content within in.

If this is your problem then there are four solutions. I would recommend changing the overflow value of your .mcontent div to hidden (from visible). This solution is compatible with IE6 as you have set a width of the parent.

.mcontent {overflow: hidden;}

Read the section "Fixing the Collapsed Parent" at the link below for more information (and the other three solutions):

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