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!

2 answers

Mottie 1134
1
point
This was chosen as the best answer

Add the padding to your inner-box CSS

#inner-box {
    background-color:#FF0000;
    float:right;
    padding-right:100px;
    padding-bottom:50px;
}

Then you will have to adjust the padding of the outer-box CSS to make it fit inside.

Answered over 6 years ago by Mottie
Doug 1095
1
point

The page you link to works exactly as I would expect it to, and I don't think I understand your problem.

Reading between the lines, though, if you replace float:right with text-align:right, does that give you what you want? (Floating an element causes its width to "shrink-wrap" to the size of the contents, and your inner-box does not have any padding.)

Answered over 6 years ago by Doug
  • Oh, I get what I was doing wrong now, problem solved =). Thanks for the reply. Oscar Jonsson over 6 years ago