Hi.

I would like to place a QR code image on the margin, next to a paragraph of text or another image.

When I try to push the QR code to the margin using CSS relative/absolute positioning, the QR code gets overdrawn by the margin.

.image-container {
  position:relative;
}
.qr-code {
  position:absolute;
  top:5%;
  left:75%;
}

Is there a way to place image on the margin using CSS positioning ?

Or maybe using @page selector ?

Any help would be much appreciated.

1. Selection_010.png‎ 45.1 kB

You could give it a negative right margin, I think.

You mean give page negative right margin ? How to do it to specific page ?

Or give negative margin to QR code img ?

Negative margin to the image. Also, are you putting anything in the page margin? Or specifying a background for it?

Negative margin set to the QR code image does not work for me.

I would very much like to put this QR code image on page margin, next to main image. But cannot achieve this effect.

Could you attach some sample HTML + image? That would make it easier to suggest a fix.

Thank you mikeday for trying to help.

I would like to place QR code img qwert-qr.png on the right margin of the page, next to main image 331-pdf.png.
I would like for it to work for all occurrences of image-container.

<div class="image-container">
	<div class="qr-code">
		<img src="qwert-qr.png"/>
	</div>
	<img src="331-pdf.png" alt="" id="img_womi-qwert" /></a>
</div>

The HTML markup can change if necessary.

1. 331-pdf.png‎ 213.9 kB ‎
   main image
2. qwert-qr.png‎ 4.4 kB ‎
   QR code

Edited 16 Sep 2014 by zizul

Something like this seems the easiest way:

div.qr-code {
    float: right;
    margin-right: -2cm
}

Ok, I figured that one out using the minimal test case.

The problem was that one of the further container divs for main image and QR code image had property overflow set to hidden.

The QR code was not overdrawn by the margin, but overflowing the container div.

Both ways of putting image on margin eventually worked: float:right and position:absolute.

Thanks for your help !