Width issue??

[ziycon]

The below code works fine as you can see in the image below but i want to specify a width for the box but if i add a div where the letter 't' is then the box messes up, how can i specify the width of the box??

HTML:

<div id="footer_container">
        <div class="fbl"><div class="fbr"><div class="ftl"><div class="ftr">
            t
        </div></div></div></div>
        <div class="clear">&nbsp;</div>
</div>

CSS:

#footer_container {
    float: left;
    width: 100%;
    margin: 5px 0 0 0;
    clear: left;
    display: inline;
}
.fbl {
    width: 20em;
    background: url('../../media/images/layout/fbl.gif') 0 100% no-repeat #FFFFFF;
}
.fbr {
    background: url('../../media/images/layout/fbr.gif') 100% 100% no-repeat;
}
.ftl {
    background: url('../../media/images/layout/ftl.gif') 0 0 no-repeat;
}
.ftr {
    padding: 10px;
    background: url('../../media/images/layout/ftr.gif') 100% 0 no-repeat; 
}
.clear {
    height: 1px;
    font-size: 1px; 
}