I am having a problem with negative margins. What I want to do is have two divs that float left, then I want to have another div that floats right but is inline with the top div of the two divs on the left. Normally, I would just use a negative margin-top on the div that was floated right, but this does not seem to render correctly in Prince. The order of the divs in the HTML cannot change, so this must be done in CSS. Any help would be most appreciated

Example:

css:

#content { font-size: 13pt; }
.left { float: left; clear: left; }
.right { float: right; margin-top: -13pt; }

html:

<div id ="content">
   <div class="left">Top</div>
   <div class="left">Bottom</div>
   <div class="right">Top</div>
</div>

That's an interesting interaction between float and clear. Removing the negative margin makes the output correct in Prince, are you able to make that change to your CSS?

Sorry for the delay in response, but thank you for your immediate one. I understand that removing the negative margin renders "correctly" in Prince. I guess I was wondering if there was a work-around to having the elements display in the way specified. The problem I am having is mainly that I don't have access to the HTML only the CSS applied to it.

Again, I am trying to get something that renders like this:

|.Element 1.............Element 3.|
|.Element 2............................|

where element 1 and 2 are against the left side of the page and element 3 is on the right side, but inline with element 1.

Thanks for the help.

So, looks like the problem is not that Prince can't do that, it's that the browser rendering the HTML/CSS looks different than what is displayed in the PDF. By doing what you said, the PDF looks great -- but what is displayed in the browser doesn't. I am trying to make an exact representation of the HTML/CSS in the PDF that looks the same in both.