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.pdf‎ 198.0 kB

Are you using tables or multi-column layout? Would you be able to attach the HTML+CSS?

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.webarchive‎ 725.2 kB
2. documents.css‎ 10.1 kB
3. documents_style.css‎ 1.8 kB
4. standard.css‎ 33.8 kB
5. typography.css‎ 17.3 kB

Would you be able to use ZIP or just the plain HTML instead of webarchive? I am not using Safari.

This should be plain html.

1. Ett_nyhetsbrev_om_ditt_kollektivavtal.pdf-4.html‎ 8.4 kB

I tried to set a fixed width in pixels of the image but it still floats out over the padding.

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.

Thanks, that worked well!