Forum Bugs

img width="100%" includes padding width?

jonas@nobicon.se
Hi,

I have a problem with a two column table and an image.

The columns are width="50%" and have paddings towards the center.
The img in the right column is width="100%"

Now in html this looks great put in pdf the image has assumed the width of the column+padding.
This means the right column becomes wider than the left as the original padding is added as well.

Please see attached pdf.

I can't get this to work after a lot of experimenting with box-sizing and padding, etc.
Using css style instead of element attributes makes no difference.

Any ideas how to force the image to become 100% of the intended column width?
  1. Ett nyhetsbrev om ditt kollektivavtal-32.pdf198.0 kB
mikeday
Are you using tables or multi-column layout? Would you be able to attach the HTML+CSS?
jonas@nobicon.se
Hi, please find attached html + css.

Columns are made using tables as I want the same html to work also in html emails.

Appreciate any help.

/Jonas
  1. document.webarchive725.2 kB
  2. documents.css10.1 kB
  3. documents_style.css1.8 kB
  4. standard.css33.8 kB
  5. typography.css17.3 kB
mikeday
Would you be able to use ZIP or just the plain HTML instead of webarchive? I am not using Safari.
jonas@nobicon.se
This should be plain html.
  1. Ett_nyhetsbrev_om_ditt_kollektivavtal.pdf-4.html8.4 kB
jonas@nobicon.se
I tried to set a fixed width in pixels of the image but it still floats out over the padding.
mikeday
This is a tricky table layout issue. Are you able to move the horizontal padding to a div within the table cell, instead of having it on the table cell itself? That fixes the issue for me.
jonas@nobicon.se
Thanks, that worked well!