Forum How do I...?

output image on margin

zizul
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%;
}


Selection_010.png


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.png45.1 kB
mikeday
You could give it a negative right margin, I think.
zizul
You mean give page negative right margin ? How to do it to specific page ?

Or give negative margin to QR code img ?
mikeday
Negative margin to the image. Also, are you putting anything in the page margin? Or specifying a background for it?
zizul
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.
mikeday
Could you attach some sample HTML + image? That would make it easier to suggest a fix.
zizul
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.png213.9 kB
    main image
  2. qwert-qr.png4.4 kB
    QR code

Edited by zizul

mikeday
Something like this seems the easiest way:
div.qr-code {
    float: right;
    margin-right: -2cm
}
zizul
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 !