Using Width:auto not working for middle float on a div?

Question

Hi there,

I have created a small form which has four corners (used for rounded corners)... i wanted to be able to set the width to AUTO for Upper-Center so that it would take the maximum hence total width is 500px (see below) "minus" 12px for each corner ... but it just collapses - the auto doesn't seem to work.. anyway around this or do i need to enter a manual figure?

I wanted to be able to control the size by the container div called contact-form..... hence wanting to use AUTO... otherwise i have to update the sizes in more than one place..

#contact-form
{
   width:500px;
   float:left;   
}

#corner-upper-left
{
   background-image: url('../images/uppleft.gif');
   background-repeat: no-repeat;
   float:left;
   width:12px;
}

#upper-center
{
   float:left;
   background-color: #F04A23; /* Red */
   width:auto;
}

#corner-upper-right
{
   background-image: url('../images/uppright.gif');
   background-repeat: no-repeat;
   float:left;
   width:12px;
}

UPDATE FOR HTML

    <div id="contact-form">
        <div id="corner-upper-left">
            &nbsp;
        </div>
        <div id="upper-center">
            &nbsp;</div>
        <div id="corner-upper-right">
            &nbsp;
        </div>
        <div id="center-section">
            &nbsp;
        </div>
         <div id="corner-bottom-left">
            &nbsp;
        </div>
        <div id="bottom-center">
            &nbsp;</div>
             <div id="corner-bottom-right">
            &nbsp;
        </div>
    </div>

Answer 1

Try width: 100%, it should fit inside its container. For an actual test please post your html too :)