Help with html to align text on left and image on right | XM Community
Skip to main content

How do I left align my text and right align my image so it looks something like this

 

The code is below:

<table border="1" cellpadding="1" cellspacing="1" style="width:500px;">
    <tbody>
        <tr>
            <td style="width: 1300px; background-color: rgb(180, 220, 150);"><br />
            <br />
            <br />
            <br />
            <span style="font-size:16px;"><span style="font-family:Verdana,Geneva,sans-serif;">Thank you, your response to the EES has now been submitted. </span></span><br />
            <br />
            <span style="font-size:24px;"><span style="font-family:Verdana,Geneva,sans-serif;"><strong><span style="color:#149b5f;">2024 Safety Culture Survey</span></strong></span></span><br />
            <br />
            <span style="font-size:16px;"><span style="font-family:Verdana,Geneva,sans-serif;"><strong><span style="color:#0f69af;">We care about each other—safety first!</span></strong><br />
            &nbsp;<br />
            Teresa Rodo values your input. She encourages you to take your time and answer 50 questions on Safety culture.<br />
            &nbsp;<br />
            You’ll need about 10 minutes, and you can skip any questions that don’t apply.</span><br />
            <br />
            <span style="font-family:Verdana,Geneva,sans-serif;"><a href="https://xxxxxxxxx.fra1.qualtrics.com/jfe/form/SV_73wle7dFUXUUskK?Q_TS_ID=TS_9qWOeCtuLzQBMCS&amp;Q_TS_RS=Self&amp;Q_EE_ANON=1&amp;_=1" target="_blank">Take me to the Safety Culture Survey</a></span></span><br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            &nbsp;</td>
            <td style="background-color: rgb(180, 220, 150); border-color: rgb(180, 220, 150);"><img src="https://xxxxxxxxxx.eu.qualtrics.com/CP/Graphic.php?IM=IM_fhPbWyWrtpVkVYK" style="width: 250px; height: 311px;" /></td>
        </tr>
    </tbody>
</table>
 

Note this is an end of survey message.  Using the code below all I see is the text and the image refuses to appear.  Help

Try the below updated code:

<table border="0" cellpadding="0" cellspacing="0" style="width: 500px;">
<tbody>
<tr>
<td style="width: 60%; background-color: #b4dc96; padding: 20px;">
<p style="font-size: 16px; font-family: Verdana, Geneva, sans-serif;">
Thank you, your response to the EES has now been submitted.
</p>
<p style="font-size: 24px; font-family: Verdana, Geneva, sans-serif; font-weight: bold; color: #149b5f;">
2024 Safety Culture Survey
</p>
<p style="font-size: 16px; font-family: Verdana, Geneva, sans-serif; font-weight: bold; color: #0f69af;">
We care about each other—safety first!
</p>
<p style="font-size: 16px; font-family: Verdana, Geneva, sans-serif;">
Teresa Rodo values your input. She encourages you to take your time and answer 50 questions on Safety culture.
<br><br>
You’ll need about 10 minutes, and you can skip any questions that don’t apply.
</p>
<p style="font-family: Verdana, Geneva, sans-serif;">
<a href="https://xxxxxxxxx.fra1.qualtrics.com/jfe/form/SV_XXXXX?Q_TS_ID=TS_9qWOeCtuLzQBMCS&amp;Q_TS_RS=Self&amp;Q_EE_ANON=1&amp;_=1" target="_blank" style="color: #0f69af; text-decoration: none;">Take me to the Safety Culture Survey</a>
</p>
</td>
<td style="background-color: #b4dc96; padding: 10px;">
<img src="https://xxxxxxxxxx.eu.qualtrics.com/CP/Graphic.php?IM=IM_fhPbWyWrtpVkVYK" alt="Safety Survey Graphic" style="width: 250px; height: 311px;">
</td>
</tr>
</tbody>
</table>

Make sure to update the survey link in the code.


@karen_split-pin Try this code and let me know if it work, add some line brake as you want

<table border="0" cellpadding="10" cellspacing="0" style="width: 100%; background-color: rgb(180, 220, 150);">
<tbody>
<tr>
<!-- Left-aligned text -->
<td style="width: 70%; vertical-align: top; text-align: left;">
<span style="font-size:16px;">
<span style="font-family:Verdana,Geneva,sans-serif;">
Thank you, your response to the EES has now been submitted.
</span>
</span><br /><br />
<span style="font-size:24px;">
<span style="font-family:Verdana,Geneva,sans-serif;">
<strong>
<span style="color:#149b5f;">2024 Safety Culture Survey</span>
</strong>
</span>
</span><br /><br />
<span style="font-size:16px;">
<span style="font-family:Verdana,Geneva,sans-serif;">
<strong>
<span style="color:#0f69af;">We care about each other—safety first!</span>
</strong><br /><br />
Teresa Rodo values your input. She encourages you to take your time and answer 50 questions on Safety culture.<br /><br />
You’ll need about 10 minutes, and you can skip any questions that don’t apply.
</span><br /><br />
<span style="font-family:Verdana,Geneva,sans-serif;">
<a href="https://xxxxxxxxx.fra1.qualtrics.com/jfe/form/SV_73wle7dFUXUUskK?Q_TS_ID=TS_9qWOeCtuLzQBMCS&amp;Q_TS_RS=Self&amp;Q_EE_ANON=1&amp;_=1" target="_blank">
Take me to the Safety Culture Survey
</a>
</span>
</span><br /><br />
</td>

<!-- Right-aligned image -->
<td style="width: 30%; vertical-align: top; text-align: right;">
<img src="https://xxxxxxxxxx.eu.qualtrics.com/CP/Graphic.php?IM=IM_fhPbWyWrtpVkVYK" style="width: 250px; height: 311px;" alt="Safety Culture Survey Image"/>
</td>
</tr>
</tbody>
</table>

 


These worked a treat.  Thanks so much!  How would I do it if I didn’t want to use a table, just the text and the picture.  I only used a table as I thought it would be easy!


@karen_split-pin You can use flexbox instead of a table

<div style="display: flex; justify-content: space-between; align-items: center; background-color: rgb(180, 220, 150); padding: 10px;">

<div style="width: 70%; text-align: left;">
<span style="font-size:16px;">
<span style="font-family:Verdana,Geneva,sans-serif;">
Thank you, your response to the EES has now been submitted.
</span>
</span><br /><br />
<span style="font-size:24px;">
<span style="font-family:Verdana,Geneva,sans-serif;">
<strong>
<span style="color:#149b5f;">2024 Safety Culture Survey</span>
</strong>
</span>
</span><br /><br />
<span style="font-size:16px;">
<span style="font-family:Verdana,Geneva,sans-serif;">
<strong>
<span style="color:#0f69af;">We care about each other—safety first!</span>
</strong><br /><br />
Teresa Rodo values your input. She encourages you to take your time and answer 50 questions on Safety culture.<br /><br />
You’ll need about 10 minutes, and you can skip any questions that don’t apply.
</span><br /><br />
<span style="font-family:Verdana,Geneva,sans-serif;">
<a href="https://xxxxxxxxx.fra1.qualtrics.com/jfe/form/SV_73wle7dFUXUUskK?Q_TS_ID=TS_9qWOeCtuLzQBMCS&amp;Q_TS_RS=Self&amp;Q_EE_ANON=1&amp;_=1" target="_blank">
Take me to the Safety Culture Survey
</a>
</span>
</span><br /><br />
</div>

<div style="width: 30%; text-align: right; align-self: center;">
<img src="https://xxxxxxxxxx.eu.qualtrics.com/CP/Graphic.php?IM=IM_fhPbWyWrtpVkVYK" style="width: 250px; height: 311px;" alt="Safety Culture Survey Image"/>
</div>

</div>

Hope it help


This is great.  Thank you so much for your help.  You’ve made my day!


Leave a Reply