2 column sizing

This one involves a bit of maths… You need to identify what the size of the table wrapping both images are and go from there. The example in this post is a 560px width table.

Image 18

The contents is structured so that there is a 270px width table containing an image and a 270px width table containing text with a 20px with <td></td> in between. These 3 elements add up to 560px to fill out the 560px width table.

Image 19

In order to keep the structure of the snippet the sizes must all add up to the table it is wrapped in. Therefore, if the image wants to be smaller, say 150px wide then the text or spacer widths need to be increased to add up to 560px. Therefore the new sizes in this case will be a 150px width table containing an image, 20px spacer and 390px table containing text.

Image 20

Image 21

Another way to change the size yet fill out the table is to change the size of the table itself. Say you want to change the size of the image to 150px but want to keep the spacer at 20px and the text at 270px. The only way to fill out the table wrapping it is to make the table itself smaller. So the table will be reduced from 560px to 440px wide.

Image 22

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s