Padding-background of floated div does not show up.

I'm having problems with a div that I need to have padding. Adding padding to it "works" however the padding-part doesn't get the background that the rest of the div has, it's just "invisible".

I've stripped out the relevant part of the code. Fire it up and you'll see. If i remove the floating of the inner box then the padding-background works, but the div needs to stay at the right edge so I can't just do that.

<style type='text/css'><!--
#outer-box {
    padding-right:100px;
    padding-bottom:50px;
    background-color:#AAAAAA;
}
#inner-box {
    background-color:#FF0000;
    float:right;
}
-->
</style> 
<body>
    <div id="outer-box">
        <div id="inner-box">
          Hello World!
        </div>
    </div>
</body>

How would I be able to keep the div floated and have a visible padding-background?

Thanks in advance!

ansaurus

tags:

views:

answers:

Padding-background of floated div does not show up.

related questions