Need to solve CSS DIV Default width problem: Looks good in IE. Not Firefox.

I've set up an example of what I'm running into here: http://studiozion.com/cssproblem/fix_it.htm.

Relevant code blocks...

<style type="text/css">
body
{
    background: transparent url(Grade300_Color1.png) repeat-x 
    }
.RowMaker
{
    overflow: auto;
}
.ColumnMaker
{
    float: left;
}
.ColumnMaker2
{
    float: right;
}
.PadTop
{
    padding-top: 10px;
}
.PadBot
{
    padding-bottom: 10px;
}
.PadLeft
{
    padding-left: 15px;
}
.PadRight
{
    padding-right: 15px;
}
.ControlCurve1
{
    height: 6px;
    background: transparent url(ControlCurve1.png) no-repeat right -6px
    }
.ControlCurveRight1
{
    height: 6px;
    width: 6px;
    background: transparent url(ControlCurve1.png) no-repeat top left
    }
.ControlCurveLeft1
{
    height: 6px;
    width: 6px;
    background: transparent url(ControlCurve1.png) no-repeat bottom left
    }
</style>


<div class="RowMaker">
    <div class="ColumnMaker ControlCurveLeft1"><span></span></div>

    <div class="ColumnMaker ControlCurve1">
        <div class="RowMaker">
            <div class="ColumnMaker2 ControlCurveRight1"><span></span></div>       
        </div>
    </div>
</div>

So the issue is that the div with class "ColumnMaker ControlCurve1" will expand to fill the width of parent container with class "RowMaker" in IE creating a nice little beveled cap for a div. But in Firefox the "ColumnMaker ControlCurve1" div truncates causing the right side of the beveled cap to be left aligned.

So who is right? And more importantly how do I go about fixing this while retaining the flexibilty of a visual element that expands to it's parent container? I really don't want to set a hard width on "ColumnMaker Control1".

From stackoverflow

• firefox is always the right one (j/k)

  this problem has been solved many times before. may i suggest a quick search to find things like

  http://redmelon.net/tstme/4corners/

  http://kalsey.com/blog/2003/07/rounded_corners_in_css/

  there is also a jquery solution

  http://www.malsup.com/jquery/corner/

  Jimmie R. Houts : "firefox is always the right one" is not really accurate. All of the browsers follow their own interpretation of the standards, picking anc choosing what they will support and how they will support it. Most of the time, compared to ie, firefox is correct, but there are things that it does wrong or just plain does not support.

• you need to clear your floats. in your stylesheet, include the following code for the CONTAINER that has floats in it:

  #yourContainer:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }
  

  you can also (and should also) clear your floats for IE by putting min-height: 10px; in your #yourContainer style definition.

  It's also possible that because you have no content and have not set a width, the div will not stretch to anything.

  Just some thoughts looking at it without really testing.