Creating an HTML email table that appears at the bottom when viewed in Outlook desktop

I am currently working on creating a responsive html email layout. Within the parent table, I have two nested tables - one on the left side and one on the right side. The issue I am facing is that in Outlook Desktop, the table on the right side is being pushed to the bottom if there is more content on the left side. I want the table on the right to always be aligned to the top, regardless of the content length on the left side.

<table border="0" cellspacing="0" cellpadding="0" width="100%" style="border-collapse: collapse;" >
    <tr>
        <td valign="top">
            <!--[if (gte mso 9)|(IE)]>
            <table width="69%" align="left" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td valign="top">
            <![endif]-->
            <table class="col535" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;max-width:535px;width:100%;border-right:1px solid #aaaaaa;">
                <tr>
                    <td class="left_column_stack" valign="top" style="padding:0 20px 0 0;vertical-align:top;">
                        // Very Long Text (1500 lines)
                    </td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                    </td>
                </tr>
            </table>
            <![endif]-->

            <!--[if (gte mso 9)|(IE)]>
            <table width="25%" align="left" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
            <![endif]-->
            <table width="200" cellpadding="0" cellspacing="0" border="0" align="left" style="border-collapse:collapse;max-width:200px;width:100%;">
                <tr>
                    <td class="right_column" valign="top" style="padding:0 0 0 20px;" >
                        // Small Text (250 lines)
                    </td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                    </td>
                </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>

JS Fiddle : http://jsfiddle.net/NrERK/

It seems that this issue only occurs in Outlook Desktop, while it works fine elsewhere. If you have any solutions or suggestions to resolve this problem, please let me know.

htmlcssoutlookhtml-tablehtml-email

Answer №1

When creating an HTML email, it's recommended to use 'px' values instead of '%' values.

I adjusted the width of the main table from 100% to 700px

Check out this jsfiddle link! 

<table border="0" cellspacing="0" cellpadding="0" width="700" style="border-collapse: collapse;" >
<tr>
    <td valign="top">
        <!--[if (gte mso 9)|(IE)]>
        <table width="69%" align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td valign="top">
        <![endif]-->
        <table class="col535" cellpadding="0" cellspacing="0" align="left" style="float:left;border-collapse:collapse;max-width:500px;width:100%;border-right:1px solid #aaaaaa;">
            <tr>
                <td class="left_column_stack" valign="top" style="padding:0 20px 0 0;vertical-align:top;">
                    Left Side <br>
                    [Repeating Left Side content]
                </td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
                </td>
            </tr>
        </table>
        <![endif]-->

        <!--[if (gte mso 9)|(IE)]>
        <table width="25%" align="left" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td>
        <![endif]-->
        <table width="200" cellpadding="0" cellspacing="0" border="0" align="left" style="float:left;border-collapse:collapse;max-width:200px;width:100%;">
            <tr>
                <td class="right_column" valign="top" style="padding:0 0 0 20px;" >
                    Right Side <br>
                    [Repeating Right Side content]
                </td>
            </tr>
        </table>
        <!--[if (gte mso 9)|(IE)]>
                </td>
            </tr>
        </table>
        <![endif]-->
    </td>
</tr>
</table>

Answer №2

Have you tried adjusting the length of your first column to see if that resolves the problem?

Based on your description, the issue may be related to the Outlook page break problem. You can refer to this link for more information.

Alternatively, it could be caused by a float (alignment) issue, but without a visual reference, it's difficult to pinpoint the exact cause.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to dynamically change the title of a tab when new content is added to a minimized page?

Is anyone familiar with how websites like Facebook and Buzzfeed update their tab titles when there are multiple tabs open? I have noticed that sometimes they add a "(1)" or "(2)" to indicate changes on the page. Do they use JavaScript to achieve this eff ...

javascriptjqueryhtmlcssajax

Uploading JSON information retrieved from an API call into a MySQL database

Previously, I asked a similar question about passing JSON data to a dropdown menu using PHP. How can I arrange data array from an API request into an HTML SELECT OPTION LIST? Now, my goal is to insert the JSON data into a MySQL database. Here is my code ...

javascriptphphtmlmysqljson

JavaScript will continue to process the submit to the server even after validation has been completed

My current challenge involves implementing form validation using JavaScript. The goal is to prevent the form from being sent to the server if any errors are found. I have made sure that my JavaScript function returns false in case of an error, like so: ...

phpjavascripthtmlvalidation

Flawlessly Outputting PHP and HTML

When querying a result from a table, I face an issue where the text does not automatically wrap to a new line if it's too long. This results in the text being displayed on a single line and often extending off the page. How can I ensure that the text ...

phphtml

To enhance the menu's appearance, apply a bottom box shadow when scrolling both up and down

My menu has the following CSS properties: #header { width: 100%; position: fixed; z-index: 9000; overflow: auto; } With these CSS properties, the element #header will always stay on top, regardless of scrolling. My goal is to add a bottom box sha ...

jqueryhtmlcss

In the hierarchy of web design elements, z-index takes precedence over css background images, which in turn take precedence over absolutely positioned

How can I position my p tag above all other elements? Here is the code snippet: HTML <section class="key-fundamentals"> <div class="container"> <img class="img-man-cbox img-responsive" src="images/img-man-cbox.png"& ...

htmlcss

Adjusting Nested Divs based on the Content

One issue I'm facing is that the nested div ('content') isn't adjusting its height based on the actual content, specifically my form. The parent div adjusts its height but the child div doesn't. Any ideas on how to fix this? HTML: ...

csshtml

Incorporate the Bootstrap classes to arrange the divs side by side, ensuring that any surplus space is utilized effectively

Having implemented a layout with two images and two paragraphs side by side, everything seemed to be working fine until I encountered an issue when setting both images' height to 400px. The goal was for the paragraph to adjust its size based on conten ...

htmlcssbootstrap-5

Techniques for animating background image using jQuery

Hello there! I'm currently experimenting with animating a background image using jQuery. Despite following a tutorial, I haven't been successful in getting my test page to work as intended. The blue Facebook icon displays, but it doesn't ani ...

javascriptjqueryhtmlcssjquery-animate

What steps should I take to rearrange the tab order of two elements located in the middle of the page?

I have a dynamic web page and I am looking for a way to reorder the tab order of two elements within the content without having to set the tab index for every preceding element. Is there a way to assign a tab index relative to an element's position in ...

javascriptjqueryhtml

"Enhancing Your Social Media Experience: Implementing a Dynamic Twitter

I'm currently working on creating a scrolling Twitter feed by following the steps outlined in this tutorial. However, I am encountering an issue where it does not work as expected. The feed starts to load but then turns white. Despite implementing a ...

jquerycsstwitter

Changing Image to Different File Type Using Angular

In my Angular Typescript project, I am currently working on modifying a method that uploads an image using the input element of type file. However, I no longer have an input element and instead have the image file stored in the assets folder of the project ...

javascripthtmlangulartypescript

Altering the JavaScript variable by selecting an option from a dropdown list

After downloading a choropleth map from leafletjs.com, I encountered an issue with multiple JS files labeled by year (e.g. us-states2012.js, us-states2013.js). The challenge now is to implement a drop down menu in such a way that selecting a specific year ...

javascriptjqueryhtmlvargeojson

What is the best method for developing a live text display switcher that works across different pages?

Hello everyone! I am currently in the process of creating a display toggler for my website. I have two separate pages, index.html and toggler.html. In index.html, the "TEXT" is displayed, while toggler.html contains the actual toggler or switch button. Whe ...

javascriptphphtmlajaxwebsocket

Text alignment post-rotation

Whenever I rotate a span, the text inside does not align horizontally. As shown in the example below, we are facing alignment issues with three rotated spans. body{ padding-left:10px; } .bordered{ border-left: 2px solid gray; position: relative ...

htmlcss

Angular: Disabling a button based on an empty datepicker selection

Can anyone help me figure out how to disable a button when the datepicker value is empty? I've tried using ngIf to check if the datepicker is empty and then disable the button, but it's not working. My goal is to make the button unclickable if th ...

javascripthtmlangulartypescript

Adaptable Image Maintains Integrity

My code is generating the following output: While I want the images to resize when dragged in, one of the right-hand images does not move below the main image as intended. Here is my code: Can anyone help me resolve this issue? Check out my CSS and HTML ...

htmlcssimageresponsive-design

Tap on the screen to initiate a phone call using dompdf

I recently came across a recommendation to include the following code snippet to enable click-to-call functionality: <a href="tel:555-555-5555">555-555-5555</a> However, I encountered an issue when trying to implement this in dompdf. ...

phphtmlcodeigniterdompdf

No matter how many PHP syntax combinations I tried, I still can't seem to update

Before jumping to conclusions about the duplicate question, I want to clarify that this is my last attempt. I've tried all possible syntaxes and there seems to be no error, yet I am unable to update the table. I can insert data into the table without ...

phphtmlmysqlcss

Choose either immediate offspring or immediate offspring of immediate offspring

I am struggling to create a CSS Selector that follows DRY principles. The selector needs to target elements within a group but not those within a subgroup of the main group. Elements should only be direct children of the main group or wrapped in an addit ...

javascripthtmlcss