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

Help with html to align text on left and image on right


Forum|alt.badge.img+6

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

5 replies

Shashi
Level 8 ●●●●●●●●
Forum|alt.badge.img+32
  • Level 8 ●●●●●●●●
  • 633 replies
  • October 4, 2024

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.


Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • QPN Level 8 ●●●●●●●●
  • 1091 replies
  • October 4, 2024

@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>

 


Forum|alt.badge.img+6
  • Author
  • QPN Level 2 ●●
  • 9 replies
  • October 4, 2024

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!


Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • QPN Level 8 ●●●●●●●●
  • 1091 replies
  • October 4, 2024

@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


Forum|alt.badge.img+6
  • Author
  • QPN Level 2 ●●
  • 9 replies
  • October 4, 2024

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


Leave a Reply