Why does a justified <p> element ignore a right margin?

Question

I have a div that contains a paragraph, a list and a right-floated div.

The parent div has a text-align:justify; property.

I am giving the p an (all-around) margin of 20px, but for some strange reason, the margin gets ignored on the right side of the paragraph. I tried it on the ul and the same thing happens.

The margin is not ignored if I do not justify the text inside the parent div. (But I do want it justified).

The floated div has a margin:0; so I guess this is not a collapsing margins issue.

The floated div is a fixed dimension (pixels) div and it is empty, except for a background image.

I also tried to specify the margin by margin-right:20px; and it did not work...

I know I could resolve it by just adding a left margin to the floated div. But I would like to know what is happening.

Here's the code I'm using (I only edited the class names).

The CSS:

.parentDiv {
    position: absolute;
    width: 660px;
    height: 350px;
    z-index: -1;
    background-color:#4F4F4F;
    color:#FFFFFF;
    text-align:justify;
    overflow:hidden;
}

.foatedDiv {
    float:right;
    height:100%;
    margin:0;

}

.parentDiv p {
        margin:20px;
}

The HTML:

<div class="parentDiv">
 <div class="floatedDiv" style="width:234px;background-image:url(images/jp01.jpg)"></div>

  <strong><a href="someAnchor">Anchor</a></strong>

  <p>Sope paragraph that I cannot understand why ignores its right margin and is driving me crazy.</p>

  <strong>Some Topic</strong>

  <ul>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
     <li>Some long item long enough to show there is no right margin.</li>
  </ul>
</div>

And this is what I get:

Answer 1

Because that image on the right side is floated to the right. It is applying your margin, you just can't tell. That paragraph actually expands all the way to the right under that image, just the content box doesn't. Your margin-right needs to be the width of that image plus 20px in order to indent it out 20px from the image.

What your margins actually look like:

While the floated element pushes your content to the left, the actual physical box still expands behind that. To push the content out more, you have to account for all that space taken up by the image. One way to do that is to add it's width to your margin on the right, like this:

.parentDiv p {
    margin: 20px 254px 20px 20px; /* 234 + 20 = 254 */
}

See the solution on jsFiddle.

Answer 2

The margin is being applied, but because the image is wider it's being counted as "good enough".

To fix this problem, add padding: 0.01px;. Intuitively this makes no difference, since you can't see a hundredth of a pixel, but the padding should force the margin to apply.

Answer 3

Not sure if you noticed the spelling error?

**.foatedDiv** {
  float:right;
  height:100%;
  margin:0;
}

Should be floatedDiv

I believe the code does what you require. However on the inline style where you reference the image add margin-left: 20px and it should fix it.

If you are further in doubt you could wrap your title and unordered list in another div and handle padding and text alignment etc from within that div.