IE Stretching My <div> to 100% Width

Question

I've been working on div with rounded corners. I've got it displaying properly in everything except IE (testing with 7). In every other browser, the div's width fits only the elements inside, just as intended. In IE, however, the width of the div is 100% of the page. I've searched a bit, but could only find information regarding IE issues with height. Any help is appreciated.

div#credentials
{
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: #494949;
}

div#tl
{
    float: left;
    background: url('../img/tl.png');
    background-repeat: no-repeat;
    cursor: default;
}

div#tr
{
    float: right;
    background: url('../img/tr.png');
    background-repeat: no-repeat;
    cursor: default;
}

div#bl
{
    float: left;
    background: url('../img/bl.png');
    background-repeat: no-repeat;
    cursor: default;
}

div#br
{
    float: right;
    background: url('../img/br.png');
    background-repeat: no-repeat;
    cursor: default;
}

#credsfooter
{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 6px;
}

<div id="credentials">
    <div id="tl">&nbsp;</div><div id="tr">&nbsp;</div>
    <input type="text" id="username" value="USERNAME" /> 
    <input type="password" id="password" value="PASSWORD" />
    <button type="submit" id="login"><img src="./img/login.png" alt="Submit" /></button>
    <div id="credsfooter"><div id="bl">&nbsp;</div><div id="br">&nbsp;</div></div>
</div>

Answer 1

I ended up enclosing the 2 top corner div's in a container div and that made IE happy.