HTML in email.  Trying to control DIV email

Posted on 2011-04-22
Last Modified: 2012-06-27
I've developed a simple page for a mass emailing and I'm trying to control the width of a DIV element when the page is viewed in Outlook.  Here's the page:

I've followed the suggestions found here:
1. I'm using a table for layout.
2. My CSS is all inline.

The parent DIV, unfortunately, is giving me trouble.  When I send the page, it vanishes completely.  Image 1 shows the DIV border on the page.  Image 2 shows the missing border after the email has been sent.  

Suggestions?  Should I wrap the enter <table> element in a parent <table> <td> combo instead of a parent <div>?
Question by:jdana
    LVL 14

    Accepted Solution

    For HTML e-mail, you want to keep the HTML as simple and dummed-down as possible. Many e-mail clients simply don't support the latest and greatest. That means lots of tables instead of divs. It's not great code for a web browser, but it's the best bet for HTML e-mail.

    So, yes, wrap the existing table inside of another table instead of using a DIV and it should work well.

    Author Closing Comment

    The wrapper table did the trick.  Configuring HTML / CSS for email is so weird!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: Create Mobile App Prototypes with Adobe XD

    This is a project-based course: we go through all the steps of creating a prototype from start to finish, using all the tools and features currently available in Adobe XD. You can complete the course in less than a day, plus all project files and fonts are included.

    Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
    Are you using email marketing software? If not, you're missing out on effortless marketing and the reaching of desired conversion rates through email marketing software.
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now