How to make image 100% wide on mobile phone? - css

I have a simple html with 2 columns in a table. The left column is with an image, the right column with text. Now the column with text should shift under the image if the width < 550. The shifting works nicely but I would like the image not to stay small but go to 100% width on mobile phone. I added a code for this in the css (img[class="img-max"]), but it does not work. Could anyone help to get it working?
This is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>A Simple Responsive HTML Email</title>
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
img {height: auto;}
.content {width: 100%; max-width: 600px;}
.header {padding: 40px 30px 20px 30px;}
.subhead {font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;}
.h1, .h2, .bodycopy {color: #153643; font-family: sans-serif;}
.h1 {font-size: 33px; line-height: 38px; font-weight: bold;}
.h2 {padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold;}
.bodycopy {font-size: 16px; line-height: 22px;}
.fix {display: block;}
#media screen and (max-width: 550px) {
(img[class="img-max"]{
max-width: 100% !important;
height:auto !important;
align: center !important;
display:block !important;
}
}
/*#media only screen and (min-device-width: 601px) {
.content {width: 600px !important;}
.col425 {width: 425px!important;}
.col380 {width: 380px!important;}
}*/
</style>
</head>
<body yahoo bgcolor="#f6f8f1" style="margin: 0;padding: 0;min-width: 100%!important;">
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table bgcolor="#ffffff" class="content" align="center" cellpadding="0" cellspacing="0" border="1" style="width: 100%; max-width: 600px;">
<tr>
<td bgcolor="#c7d8a7" class="header" style="padding: 0px 0px 0px 0px;">
<table width="50%" align="left" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="70" style="padding: 0px 0px 0px 0px;">
<img class="img-max" src="http://www.deacademievoorinnovatieftrainen.nl/nieuwsbrieven/coach.jpg" border="1" alt="" width="95%" style="height: auto;">
</td>
<td width="5" height="1" style="padding: 0px 0px 0px 0px;"><img src="http://www.deacademievoorinnovatieftrainen.nl/nieuwsbrieven/nic/dotwhite.jpg" width="5" border="1" style="height: auto;"></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col425" align="left" border="1" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 270px;">
<tr>
<td height="70">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="subhead" style="padding: 20px 20px 30px 25px;font-size: 15px;color: #ffffff;font-family: sans-serif;letter-spacing: 10px;">
Header 1
</td>
</tr>
<tr>
<td class="h1" style="padding: 20px 20px 30px 25px; color: #153643;font-family: sans-serif;font-size: 18px;line-height: 18px;font-weight: bold;">
Header 2
</td>
</tr>
<tr>
<td style="padding: 20px 0px 30px 25px;color: #153643;font-family: sans-serif;font-size: 12px;line-height: 14px;font-weight: 400;">
<div align="justify">This is main text. This is main text. This is main text. This is main text. This is main text. This is main text. </div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
Can someone please help me how I can get this image 100% wide on mobile phone?


#media screen and (max-width: 550px) {
img.img-max{
max-width: 100% !important;
height:auto !important;
align: center !important;
display:block !important;
}
}


I'm not entirely sure if this is what you want, but i'm going to try it anyway.
To make my own site mobile-friendly, I use Bootstrap.
Try adding these two lines of code to your header:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
You can learn about this in the Bootstrap CSS docs.
Hope I helped! :)


Yes, here is my jsfiddle:
[Link to jsfiddle:][1]
[1]: http://jsfiddle.net/Kippie32/2hqg7xzs/

Related

remove spacing/padding between columns

Email newsletter looks good, other than they want the spacing between the columns to be gone so the left block touches the right block. I have the spacing to 0 but its still separate columns left to right. They want to keep the three rows separate but not the left to right. Any way to achieve this?
any spacing I've changed only affects the up and down between elements, not left and right.
td {
font-family: Lato, Arial, Helvetica, sans-serif !important;
}
#applecenter {
margin:auto;
max-width:690px;
}
table, td {
border-collapse: collapse;
}
a {
color:#0D47A1;
text-decoration:none;
}
a:visited {
text-decoration:none;
}
hr {
display:none;
visibility:hidden;
}
#media screen and (max-width: 693px) {
#background {
padding:0 !important;
}
table, td {
width:auto !important;
}
ul {
margin:19px 0 19px 10px !important;
}
#hero img, #narrow, #preheader {
width:95% !important;
}
#applecenter {
padding:10px 0;
}
#col1 {
float:left !important;
padding:20px !important;
}
#col2 {
float:left !important;
padding:0 0 10px !important;
text-align:center !important;
}
#col2 div {
display:inline-block;
padding:0 10px;
}
#col2 table {
width:200px !important;
}
#cta {
width:90% !important;
}
.goaway {
display:none;
}
.stack {
display:block;
}
.hero {
margin: 10px 0 0;
}
}
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!--<![endif]-->
<title>
Blueberry Template
</title>
<!--[if mso]>
<style>
#cta td {padding:20px;}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="background:#E0E0E0; margin:0; font-family:Lato, Arial, Helvetica, sans-serif; font-size:16px; color:#212121;mso-line-height-rule:exactly;">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr>
<td id="background" style="padding:20px; background:#E0E0E0;">
<div id="applecenter">
<table id="preheader" cellpadding="0" cellspacing="0" border="0" align="center" style="width:650px; margin:auto;">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-bottom:5px;">Use this area as a secondary subject line.</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center" style="width:690px; margin:auto;">
<tr>
<td id="hero" style="text-align:center; padding:0 0 10px;"><img style="width:650px; display:block; border:0; margin:auto;" src="http://emissourian.com/app/images/MedShoppe-Hero.jpg"></td>
</tr>
<tr>
<td style="padding:0 10px 10px;"><table cellpadding="0" cellspacing="0" border="0" align="center" style="width:650px;">
<tr>
<td valign="middle" class="stack" style="padding:10px; background:#2196F3;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" style="line-height:125%; font-size:16px; font-family:Arial, Helvetica, sans-serif; color:#ffffff; padding:10px; text-align:center;"><h1 style="margin:0; font-size:24px; line-height:100%;">- The myth of Diabetes - <br>How to get the genie back in the bottle <br><br>With 1 in 3 being <br>diabetic or pre-diabetic <br> let’s turn diabetes around together! </h1>
<p style="margin:0; text-align:center;"><br>
</p>
<a style="color:#ffffff;" href="tel:1-636-629-2022"><strong>Call To RSVP 636-629-2022</strong></a></td>
</tr>
</table></td>
<td class="goaway" style="width:10px; text-align:center;"> </td>
<td valign="top" class="stack hero" style="width:300px; text-align:center; background:#BBDEFB; padding:10px; vertical-align:top;"><img src="http://emissourian.com/app/images/MedShoppe-Body1.jpeg" alt="" style="width:100%; display:inline; border:0;">
<p style="margin:5px 0;"></p></td>
</tr>
</table></td>

Remove this unused 5th last line
<td class="goaway" style="width:10px; text-align:center;"> </td>

Content is breaking with each other when forwarding

I'm creating an email templates using Marketo app. Once created, I tried sending a sample mail to myself and it all looks good:
As you can see all the elements [table] shows fine, all together and neat, but when I try forwarding the same email, this happens:
As you can see the header is broken from the body. This also happens for the footer. Why is this happening?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mizona</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
#logo img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: block;
}
td {
word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0;
}
#content-subsection-right-img td, #content-subsection-plain td, #content-subsection-left-img td {
color: #555555;
}
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.no-spacing {
padding:0px;
margin: 0px;
}
.pad-cell5 td{
padding: 5px !important;
}
.mobile-center {
text-align: left !important;
}
#socialicons img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: inline-block !important;
border: none;
}
img {
max-width: 100%;
}
#graphic img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: none !important;
clear: both;
display: inline-block !important;
}
table[class="body"] .columns td.one {
width: 8.333333% !important;
}
table[class="body"] .column td.one {
width: 8.333333% !important;
}
table[class="body"] .columns td.two {
width: 16.666666% !important;
}
table[class="body"] .column td.two {
width: 16.666666% !important;
}
table[class="body"] .columns td.three {
width: 25% !important;
}
table[class="body"] .column td.three {
width: 25% !important;
}
table[class="body"] .columns td.four {
width: 33.333333% !important;
}
table[class="body"] .column td.four {
width: 33.333333% !important;
}
table[class="body"] .columns td.five {
width: 41.666666% !important;
}
table[class="body"] .column td.five {
width: 41.666666% !important;
}
table[class="body"] .columns td.six {
width: 50%;
}
table[class="body"] .column td.six {
width: 50%;
}
table[class="body"] .columns td.seven {
width: 58.333333% !important;
}
table[class="body"] .column td.seven {
width: 58.333333% !important;
}
table[class="body"] .columns td.eight {
width: 66.666666% !important;
}
table[class="body"] .column td.eight {
width: 66.666666% !important;
}
table[class="body"] .columns td.nine {
width: 75% !important;
}
table[class="body"] .column td.nine {
width: 75% !important;
}
table[class="body"] .columns td.ten {
width: 83.333333% !important;
}
table[class="body"] .column td.ten {
width: 83.333333% !important;
}
table[class="body"] .columns td.eleven {
width: 91.666666% !important;
}
table[class="body"] .column td.eleven {
width: 91.666666% !important;
}
table[class="body"] .columns td.twelve {
width: 100% !important;
}
table[class="body"] .column td.twelve {
width: 100% !important;
}
.pad-right-5 {
padding-right: 5px;
}
.pad-right-10 {
padding-right: 10px;
}
.pad-top-10 {
padding-top: 10px;
}
#media only screen and (max-width: 600px) {
.pad-right-10 {
padding-right: 0px;
}
.desktop-only {
display: none !important;
}
.mobile-only {
display: block;
}
#logo img {
width: 100% !important;
}
#logo-mobile img {
width: 80% !important;
}
#graphic img {
width: 100% !important;
height: auto !important;
}
*[class].center {
text-align:center !important;
margin:0 auto !important;
}
*[class].bottom-pad{ padding-bottom:35px !important;}
table[class="body"] table.columns td {
width: auto !important;
}
.social-icon td img {
width: 40px !important;
height: 40px !important;
}
}
</style>
</head>
<body style="width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:left; line-height:19px; font-size:12px; margin:0; padding:0; background:#eeeeee; color: #555555;">
<table class="body" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; height:100%; width:100%; line-height:19px; font-size:12px; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; ">
<center style="width:100%; min-width:600px; ">
<table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top" width="600">
<table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top">
<table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:600px; padding:0; display:table !important; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top">
<div class="mktEditable" id="logo" style="" mktoname="logo">
<p style="margin:0px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-header-digest-general-v2.1.jpg" alt="eO Logo White.png" constrain="true" imagepreview="false" style="max-width: 600px;" /> </p>
</div></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tr class="mktoModule" id="title-date" mktoname="title/date">
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tbody>
<tr bgcolor="#2EA049">
<td style="color:#ffffff; padding: 10px 40px" align="left" valign="middle">
<div class="mktEditable" id="title" style="" mktoname="title-date">
<p style="margin: 0px;">Volume 4 | Issue 11 | 2018</p>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="content-general" mktoname="general content">
<td style="padding: 20px 40px">
<div class="mktEditable" id="intro" style="margin-top: 20px;" mktoname="intro">
<h3 style="color: #88c34d; text-align: center;">Trust the Asset. Trust the Transaction.™</h3>
<p>More and more players across industries are realizing the advantages of digital transformation, making it a competitive necessity for companies to harness digital solutions. Our own rapid growth mirrors this trend, with eOriginal recently being named one of the fastest growing companies in the country.</p>
<p>Entering into 2019, eOriginal knows becoming part of the auto finance digital ecosystem is essential to achieving your business goals. To take full advantage of this continued growth, please join our upcoming webinar which is focus on the auto finance industry. Learn more about digital best practices and how originators and lenders can prioritize tech stack building and expansion.</p>
</div> </td>
</tr>
<tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-title" mktoname="subsection-title">
<td valign="middle" style="padding: 10px 40px;">
<div class="mktEditable" id="title-subsection" mktoname="title-subsection" style="display:inline-block;">
<p style="margin: 0px; display: inline;"><b>eOriginal Named to Deloitte's Technology Fast 500™ </b></p>
</div> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-left-imgf16aafbb-fc4e-4e27-b799-256623b49daa" mktoname="mod-subsection-left-img-1">
<td style="padding: 20px 40px">
<div class="mktEditable" id="content-subsection-left-imgf16aafbb-fc4e-4e27-b799-256623b49daa" mktoname="content-subsection-left-img">
<table class="columns">
<tbody>
<tr valign="top">
<td width="260" class="pad-right-10"> <p class="no-spacing"><img src="https://www.eoriginal.com/wp-content/uploads/2017/07/Random-image-_0005_iStock-511197926-1024x683.jpg" width="100%" /></p> </td>
<td width="260"> <p class="no-spacing">For the second consecutive year, eOriginal was named to Deloitte’s Technology Fast 500™, a ranking of the 500 fastest growing technology, media, telecommunications, life sciences and energy tech companies in North America. eOriginal's growth of 266 percent reaffirms its status as a leader in digital lending transformation and management.</p> <p class="no-spacing"><b>Read more</b></p> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
<tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-titlef7e9c286-1eb5-44f6-9d0b-5b28ac2afd8d" mktoname="subsection-title-1">
<td valign="middle" style="padding: 10px 40px;">
<div class="mktEditable" id="title-subsectionf7e9c286-1eb5-44f6-9d0b-5b28ac2afd8d" mktoname="title-subsection" style="display:inline-block;">
<p style="margin: 0px; display: inline;"><b>Live Webinar: Building an End-to-End eContracting Experience in Auto Finance</b></p>
</div> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-right-img21690d4b-48d7-4fae-a245-7fbbe7765aba" mktoname="mod-subsection-right-img-1">
<td style="padding: 20px 40px">
<div class="mktEditable" id="content-subsection-right-img21690d4b-48d7-4fae-a245-7fbbe7765aba" mktoname="content-subsection-right-img">
<table class="columns">
<tbody>
<tr valign="top">
<td width="260" class="pad-right-10"> <p class="no-spacing">Whether you provide direct or indirect lending, meeting the demands of today’s auto finance market means going digital is no longer a matter of ‘if’ but ‘when’. Join defi SOLUTIONS Chief Operating Officer Lana Johnson and eOriginal's Director of FinTech Strategies John Jacobs for insights on end-to-end digital auto financing processes, from origination to asset monetization through warehouse financing or securitization. </p> <p class="no-spacing"><b>Register Now</b></p> </td>
<td width="260"> <p class="no-spacing"><br /></p> <p class="no-spacing"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Cover Defi Solutions.jpg" height="151" width="269" /></p> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
<tr bgcolor="#353937" style="color: #FFFFFF; background-image: url(http://info.eoriginal.com/rs/907-BBE-942/images/nl-indent-separator-v2.1.jpg); background-repeat: no-repeat; background-position: 0px 50%;" class="mktoModule" id="mod-subsection-title3ccba291-3d31-4b47-8f3e-4c143fa31497" mktoname="subsection-title-clone">
<td valign="middle" style="padding: 10px 40px;">
<div class="mktEditable" id="title-subsection3ccba291-3d31-4b47-8f3e-4c143fa31497" mktoname="title-subsection" style="display:inline-block;">
<p style="margin: 0px; display: inline;"><b>Case Study: MotoLease Selects eOriginal to Digitally Transform Powersports Financing</b></p>
</div> </td>
</tr>
<tr style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" class="mktoModule" id="mod-subsection-left-img" mktoname="mod-subsection-left-img">
<td style="padding: 20px 40px">
<div class="mktEditable" id="content-subsection-left-img" mktoname="content-subsection-left-img">
<table class="columns">
<tbody>
<tr valign="top">
<td width="260" class="pad-right-10"> <p class="no-spacing"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/eO_Job-327_CS_MotoLease_COVER_01112018.png" width="178" height="252" style="display: block; margin-left: auto; margin-right: auto;" /></p> </td>
<td width="260"> <p class="no-spacing">Driven by a vision to disrupt the powersports leasing segment, MotoLease turned to eOriginal to adopt best practices in eSignature and digital asset management. This case study highlights how transformative digital lending technology drove the company's dramatic growth to corner 75 percent of the powersports leasing market. <b>Read more</b></p> </td>
</tr>
</tbody>
</table>
</div> </td>
</tr>
</table>
<table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tbody>
<tr bgcolor="#2EA049">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 20px 40px;"> eOriginal.com </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tbody>
<tr>
<td align="left" valign="middle" width="50"><img alt="Twitter" src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="LinkedIn" src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Facebook" src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;" width="40" height="40" /></td>
<td align="left" valign="middle" width="50"><img alt="Blog" src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
<tr bgcolor="#353937">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png" width="200" /><br /><br /> <span>© 2018 eOriginal, Inc. All rights reserved.</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> The Warehouse at Camden Yards<br /> 351 W. Camden St., Suite 800<br /> Baltimore, MD 21201<br /><br /> SALES <span style="color: #2EA049">1-866-935-1776</span><br />SUPPORT <span style="color: #2EA049">1-866-364-3578</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
</tbody>
</table>
</center></td>
</tr>
</tbody>
</table>
</body>
</html>

There isn't really anything you can do to prevent this. It's well known across email development that forwarding trashes any and all email layouts in any number of ways depending on the client being used.
Best bet is to try and avoid suggesting users forward the email on and provide a 'send to a friend' landing page instead. Also informing colleagues/clients of the same and making sure they don't forward between each other. Alternatives for them are to send any tests on as attachments OR sending tests directly from your ESP.
Useful Litmus blog post going into the issue a bit more here

Outlook: table align left issue

This is how it looks everywhere except in Outlook:
In Outlook it looks like that:
Three tables are used to create the 2-column design, this is the code:
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.ReadMsgBody {
width: 100%;
background-color: #ffffff;
}
.ExternalClass {
width: 100%;
background-color: #ffffff;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
html { width: 100%; }
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
table td { border-collapse: collapse; }
.yshortcuts a { border-bottom: none !important; }
img { display: block !important; }
a {
text-decoration: none;
color: #e54a39;
}
/* Media Queries */
#media only screen and (max-width: 640px) {
body { width: auto !important; }
table[class="table600"] { width: 450px !important; }
table[class="table-container"] { width: 90% !important; }
table[class="container2-2"] {
width: 47% !important;
text-align: left !important;
}
table[class="full-width"] {
width: 100% !important;
text-align: center !important;
}
img[class="img-full"] {
width: 100% !important;
height: auto !important;
}
}
#media only screen and (max-width: 479px) {
body { width: auto !important; }
table[class="table600"] { width: 290px !important; }
table[class="table-container"] { width: 82% !important; }
table[class="container2-2"] {
width: 100% !important;
text-align: left !important;
}
table[class="full-width"] {
width: 100% !important;
text-align: center !important;
}
img[class="img-full"] { width: 100% !important; }
}
<!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="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>Test</title>
</head>
<body marginwidth="0" marginheight="0" style="margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" offset="0" topmargin="0" leftmargin="0">
<!-- PREFOOTER -->
<table width="100%">
<tr>
<td align="center" bgcolor="orange">
<table class="table600" width="600">
<tr>
<td>
<table class="full-width" width="287" align="left">
<tr>
<td align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
Why do I get this mail?
</td>
</tr>
</table>
<!-- SPACE -->
<table class="full-width" width="1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td width="1" height="30" style="font-size: 30px; line-height: 30px;"></td>
</tr>
</table>
<!-- END SPACE -->
<table class="full-width" width="287" align="right">
<tr>
<td align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
Contact Us
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END PREFOOTER -->
</body>
</html>
I already figured that the problem is caused by:
<!-- SPACE -->
<table class="full-width" width="1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td width="1" height="30" style="font-size: 30px; line-height: 30px;"></td>
</tr>
</table>
<!-- END SPACE -->
But I don't understand why. How can I replace the spacer to make it work in Outlook but keep the space?

To answer your follow-up about the spacing. Just use padding on the td, padding is well supported and will work fine.
<table class="table600" width="600">
<tr>
<td style="padding-bottom: 30px;">
You can then also adjust that padding with a class in the media query.
Also a side note: You don't need to use attribute css selectors for css anymore. It was an old bug that's been fixed now. So you're free to use standard .class selectors.

Background-image css inside an html email in asp.net

I need to send mail with the image embedded as mail body. Below is the code
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="background: url(http://localhost/image/mvp-bg.jpg) no-repeat top left; width: 800px; height:685px; margin: 0 auto; color: #ffffff; font-family: Arial; font-size: 16px;">
<div style="width: 700px; margin: 0 auto; padding-top: 80px;">
<p>Mail Body</p>
</div>
</div>
</body>
</html>
Could some one let me know how to fix this.
Thanks

For email templates better refer the images from server instead of localhost, You cannot expect the user will have the images loaded in their localhost :)
Change it to url(http://domain.com/image/mvp-bg.jpg)

Got the solution from html email with background-image style not shown . Also below is the code i modified so that css are rendered properly in mail. When using tags the css were not rendering, so instaed used table tags.
<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
v\:*
{
behavior: url(#default#VML);
display: inline-block;
}
</style>
</head>
<body>
<table style="background-image: url('image/mvp-bg.jpg'); background-repeat: no-repeat;width: 800px; height:685px; margin: 0 auto; color: #ffffff; font-family: Arial; font-size: 16px;" >
<!--[if gte vml 1]>
<v:shape
stroked='f'
style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;
z-index:-503306481;
visibility:visible;
width:720pt;
height:475pt;
top:0;
left:0;
border:0;
'>
<v:imagedata src="http://www.domain.com/image/mvp-bg.jpg"/>
</v:shape>
<![endif]-->
<tbody>
<tr>
<td>
<div style="width: 700px; margin: 0 auto; padding-top: 85px; font-family: Arial; font-size: 16px;">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="2" valign="top" style="padding: 10px; color: #ffffff;">
Mail Body
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>

100% width + horizontal and vertical scrolling

My site has a width of 100%. My site often contains wide tables, and sometimes these tables gets wider than the 100% (of the viewport).
When that happens, a horizontal scrollbar appears (which is fully natural). But when I scroll horizontally, the menu is not following the width of the widest table.
I have tried various code examples available on the Internet, but none seems to help me all the way. Below is my latest code, and it works with the horizontal scrolling (because of the fixed position of the menu). But, when the page gets "high", and vertical scrolling is needed, the menu is always visible and fixed at its original viewport position (again, natural behaviour).
Is there any way to make the behave like it does now when scrolling horizontally, but acting normally when scrolling vertically?
If anyone has any suggestions, I'd be more than grateful.
<!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>
<title>Untitled Page</title>
<style type="text/css">
.myTable { width: auto; float: left; width: 100%; color: #666; border: 2px solid #666; }
.myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; }
.myMenu { text-align: center; background: #666666; float: left; width: 100%; height: 30px; margin-bottom: 20px; color: #fff; }
.myMenu ul { margin: 0px; padding: 0px; margin-right: auto; margin-left: auto; width: 300px; list-style-type: none; text-align: center; }
.myMenu ul li { float: left; padding: 5px 20px 5px 20px; }
body { margin:0; padding:50px 0 0 0; }
div#header { top:0; left:0; width:100%; height:50px; position: fixed; }
* html body { overflow:hidden; }
* html div#content { height:100%; overflow:auto; }
</style>
</head>
<body>
<div id="header">
<div class="myMenu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="content">
<table class="myTable">
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
</table>
</div>
</body>
</html>
EDIT: I managed to get it to work in IE8, but IE7 still suffers from the same disease :(
What made it work in IE8 was actually changing width: 100%; into min-width: 100%;, but IE7 doesn't seem to agree.
Anyone?
<!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>
<title>Untitled Page</title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
#container { min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left; }
#myMenu { width: auto; min-width: 100%; background: #666; float: left; margin-bottom: 15px; }
#myMenu ul { padding: 5px 0px 5px 0px; margin: 0px; width: 300px; margin-left: auto; margin-right: auto; }
#myMenu ul li { float: left; padding: 0px 15px 0px 15px; margin: 0px; }
.myTable { width: auto; float: left; color: #666; border: 2px solid #666; }
.myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; }
#filter { margin-bottom: 10px; border: 1px solid red; height: 50px; min-width: 100%; float: left; }
</style>
</head>
<body id="myBody">
<div id="container">
<div class="myMenu" id="myMenu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="filter">
some content
</div>
<table class="myTable potential">
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
</table>
<table class="myTable potential" id="myTable">
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</
td>
</tr>
</table>
</div>
</body>
</html>

Answer to my own question:
After hours and days of trying, I finally made it work in both IE7/IE8, which was the goal. The only limitation goes for IE7, where the menu is not centered when the table is too wide.
The solution was to use min-width instead of width, which lets the content grow outside of the viewport but still covering the whole screen if the content is less wide than the viewport.
I will post the code here, if anyone else in the future is facing the same terrible issue:
<!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>
<title>Untitled Page</title>
<style type="text/css">
body { margin: 0px; padding: 0px; min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left; }
#container { min-width: 100%; width: auto; margin: 0px; padding: 0px; float: left; }
#myMenu { background: #666; float: left; min-width: 100%; }
#myMenu ul { padding: 5px 0px 5px 0px; margin: 0px; width: 300px; margin-left: auto; margin-right: auto; }
#myMenu ul li { float: left; padding: 0px 15px 0px 15px; margin: 0px; }
.myTable { width: auto; float: left; color: #666; border: 2px solid #666; }
.myTable td { padding: 5px 25px 5px 25px; margin: 2px; border: 1px solid #ccc; }
#filter { background: yellow; }
html>body #myMenu { *min-width: auto; background: #666; *float: none; margin-bottom: 15px; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body id="myBody">
<div id="container">
<div class="myMenu" id="myMenu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="filter">
some content
</div>
<table class="myTable potential">
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
</table>
<table class="myTable potential" id="myTable">
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
<tr>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
<td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td><td>sdfsdfsdf</td>
</tr>
</table>
</div>
</body>
</html>
Thanks for the support!

The best I could come up with after playing was setting the same explicit width on both the body and the div.myMenu (e.g. 1800px or 150em). To do this, however, you would need to know both which pages had the wide tables and approximately how wide to make them. Problematic I expect.

Resources