Forum How do I...?

Negative Margin-Top Error

jaoeljer
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 :D

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>
mikeday
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?
jaoeljer
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.
jaoeljer
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.