Skip to main content
C
coraj57837290
Participating Frequently
October 24, 2017
Question

Space between an image and text within the same table

  • October 24, 2017
  • 4 replies
  • 2298 views

Using a one column layout, I'm trying to add space between the left image and the text on the right, as you can see they are too close together.

Nothing I try seems to be working, I know it's probably something simple but I just can't figure it out.

This is for a newsletter, rather than a website

Thanks

This topic has been closed for replies.

4 replies

Preran
Community Manager
PreranCommunity Manager
Community Manager
October 25, 2017

Hi Cora,

Did you get a chance to look at the solutions? Please do mark the one that served your purpose as correct (although each of the solutions is valid.).

Thanks,

Preran

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
October 24, 2017

Use a 2-column table with cellpadding.

Nancy O'Shea— Product User & Community Expert
hans-g.
hans-g.
Legend
October 24, 2017

Hi, today I see exceptions from usual condemning the tables!

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
October 24, 2017

If it's an HTML email or newsletter, tables are OK .

Nancy O'Shea— Product User & Community Expert
hans-g.
hans-g.
Legend
October 24, 2017

Hello Cora,

in addition to osgood_'s hint: Some time ago I tried these variations and loaded them onto my server:

http://hansgd.de/DWTest/TextUmfliessen/TextUmfliessenFoto.php

http://hansgd.de/DWTest/TextUmfliessen/TextUmfliessenInitiale.php

http://hansgd.de/DWTest/TextUmfliessen/TextUmfliessen.php

http://hansgd.de/DWTest/TextUmfliessen/TextUmfliessenInitialeBild.php

Please have a look to find out which of these soulutions could be ok for you. Feel free to use the source code.

Hans-Günter

O
osgood_
Legend
October 24, 2017

Use some css to target all the images which are inside their container, so if the images are in a <div> with the class of articles:

.articles img {

margin-right: 15px;

}

or a <div> with the id of articles:

#articles img {

margin-right: 15px;

}

EDITED. If its for  a newsletter that you are mailing out then it needs to be more like below::::::

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

</head>

<body>

<table style="width: 600px; margin: 0 auto;" cellspacing="0" cellpadding="0" border="0">

<tr>

<td style="background-color: #544773; padding: 20px 0 20px 20px;">

<img src="http://images.all-free-download.com/images/graphiclarge/butterfly_on_flower_186209.jpg" width="125" height="125" alt="" />

</td>

<td style="font-family: helvetica, arial, sans-serif; background-color: #544773; padding: 20px 0 20px 20px;">

<p style="font-size: 18px; color: #fff; margin: 0; padding: 0 0 10px 0;">Title of news article</p>

<p style="color: #fff; margin: 0; padding: 0; color: #fff;">

text text text text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text text text text

</p>

</td>

</tr>

<tr>

<td style="background-color: #544773; padding: 20px 0 20px 20px;">

<img src="http://images.all-free-download.com/images/graphiclarge/butterfly_on_flower_186209.jpg" width="125" height="125" alt="" />

</td>

<td style="font-family: helvetica, arial, sans-serif; background-color: #544773; padding: 20px 0 20px 20px;">

<p style="font-size: 18px; color: #fff; margin: 0; padding: 0 0 10px 0;">Title of news article</p>

<p style="color: #fff; margin: 0; padding: 0; color: #fff;">

text text text text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text text text text

</p>

</td>

</tr>

<tr>

<td style="background-color: #544773; padding: 20px 0 20px 20px;">

<img src="http://images.all-free-download.com/images/graphiclarge/butterfly_on_flower_186209.jpg" width="125" height="125" alt="" />

</td>

<td style="font-family: helvetica, arial, sans-serif; background-color: #544773; padding: 20px 0 20px 20px;">

<p style="font-size: 18px; color: #fff; margin: 0; padding: 0 0 10px 0;">Title of news article</p>

<p style="color: #fff; margin: 0; padding: 0; color: #fff;">

text text text text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text text text text

text text text text text text text text text text text text text text text text text text text text text text text text text text

</p>

</td>

</tr>

</table>

</body>

</html>

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices