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

Question

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

Answer 1

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/

Answer 2

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.