Content is breaking with each other when forwarding - css

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

Related

Media query used for email formatting not working

I can't seem to get media queries to work - at least for the one relevant style which needs to work - padding for the table-wrapper class. The padding set inline always wins.
I believe I need to have !important set for the media query so I do have that.
Media queries are at the top of the html
This is at the top of the html - <meta name="viewport" content="width=device-width">
The rest of the styles are inline / done by an app.
Anyone know what I might be missing?
https://codepen.io/lg00/pen/LvrXVY
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title></title>
<style>
/* Responsive */
#media screen and (max-width: 700px) {
.table-wrapper {
width: 100% !important;
margin-top: 0px !important;
border-radius: 0px !important;
padding: 5px 15px !important;
}
.header {
border-radius: 0px !important;
}
.header-title {
padding-left: 20px !important;
padding-right: 20px !important;
}
.header-title h1 {
font-size: 25px !important;
}
}
</style>
<div class="email-wrapper" style="background-color:#F5F6F7">
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<!-- PADDING SET HERE -->
<table cellpadding="0" cellspacing="0" class="table-wrapper" style="margin:auto; margin-top:50px; background-color:#fff; padding:64px 100px">
<tbody>
<tr>
<td class="container header" style="background-repeat:no-repeat; border-top-left-radius:6px; border-top-right-radius:6px; text-align:center; color:#000; padding-bottom:32px; display:block !important; margin:0 auto !important; clear:both !important">
<div class="header-title" style="font-weight:bold">Test</div>
</td>
</tr>
<tr>
<td class="content" style="border-bottom-left-radius:6px; border-bottom-right-radius:6px; margin:0 auto !important; clear:both !important">
<div class="header-title" style="color:#000; text-align:center">
<h1 style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; margin-bottom:15px; color:#47505E; margin:0px 0 10px; line-height:1.2; font-weight:200; line-height:45px; font-weight:bold; margin-bottom:30px; font-size:28px; line-height:40px; margin-bottom:32px; font-weight:400; color:#000; padding-top:0px">Test The Length of the Title - Will it Wrap</h1>
</div>
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="text-center" style="text-align:center">
Test
</td>
</tr>
</tbody>
</table>
<table class="data-table bordered" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px; border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
<tbody>
<tr>
<td class="data-table-title" style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; font-weight:bold; font-size:20px; padding-top:0px">Test</td>
</tr>
<tr>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
<td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px">Test</td>
</tr>
<tr class="bordered" style="border-top:1px solid #DBDBDB; border-bottom:1px solid #DBDBDB">
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">Test</td>
<td class="text-right" style="text-align:right; letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; border-top:1px solid #DBDBDB">test</td>
</tr>
</tbody>
</table>
<table class="data-table" width="100%" cellpadding="0" cellspacing="0" style="padding-top:32px; padding-bottom:32px">
<tbody>
<tr>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
<p style="margin-top: 0px; ">
<span class="bold" style="font-weight:bold">Test</span><br>
test<br>
</p>
</td>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; width: 20%"></td>
<td style="letter-spacing:0.6px; padding-top:5px; padding-bottom:5px; vertical-align: top; ">
<p style="margin-top: 0px; ">
<span class="bold" style="font-weight:bold">Test2</span><br>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="footer" style="width:100%; text-align:center; clear:both !important">
<p class="text-center" style="text-align:center; font-size:12px; color:#666">Test</p>
</div>
<br>
</td>
</tr>
</tbody>
</table>
</div>

It is a specificity issue in your media queries. Move .header-title above .table-wrapper since the padding is overriding what is being set in .table-wrapper
.header-title {
padding-left: 20px !important;
padding-right: 20px !important;
}
.table-wrapper {
width: 100% !important;
margin-top: 0px !important;
border-radius: 0px !important;
padding: 5px 15px !important;
}
.header {
border-radius: 0px !important;
}

Change your css to this, I hope it will work.
<style>
//Default styling
.table-wrapper {
width: 50%;
margin-top: 0px;
border-radius: 0px;
padding: 5px 15px;
}
/* Responsive */
#media screen and (max-width: 700px) {
.table-wrapper {
width: 100%;
margin-top: 0px;
border-radius: 0px;
padding: 5px 15px;
}
.header {
border-radius: 0px;
}
.header-title {
padding-left: 20px;
padding-right: 20px;
}
.header-title h1 {
font-size: 25px;
}
}
</style>

Please check the CSS specificity, as you said the in-line style is the most specific selector and "wins".
CSS specificity:
Inline Style
ID, Class
Pseudo-class, atributes
Elements, pseudo-element

Attach the css arrow to the top of a css border

This would be really easy using negative margins, but I can't use them inside a <table>. Been at this for hours last night and this morning. Already googled different types of navs and there's nothing like this.
How do I make the CSS arrow stick to the top and bottom of the vertical line? https://codepen.io/TylerL-uxai/pen/ZqYNjw
td {
padding-top: 10px;
padding-bottom: 10px;
}
.active {
font-weight: bold;
}
table {
border-collapse: collapse;
}
.right{
text-align: right;
border-right: 1px solid black;
}
.v {
text-align: right;
}
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.dot {
height: 10px;
width: 10px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
<div class="menu">
<table>
<tr>
<td class="v">
<i class="arrow up"></i>
</td>
<td>
Abstract
</td>
</tr>
<tr>
<td class="right">
Why
</td>
</tr>
<tr>
<td class="right">
<div class="active">Home</div>
</td>
<td><span class="dot"></span> <small> You are here.</small></td>
</tr>
<tr>
<td class="right">
Examples
</td>
</tr>
<tr>
<td class="right">
Process
</td>
</tr>
<tr>
<td class="right">
Tools
</td>
</tr>
<tr>
<td class="v"><i class="down"></i></td>
<td style="padding-left: 10px;">
Concrete
</td>
</tr>
</table>
</div>

Position relative and then use top & right negatives
.v {
position: relative;
right:-6px;
top: -15px;
text-align: right;
}

CSS Line Dividor

I'm trying to organize two sets of information in a particular way. I have a very crude mock-up here:
https://imgur.com/a/LrSCg
I have everything working except for the diving line between the two sets of info. I've tried setting up the entire thing as a table and then setting the appropriate border styles, but that didn't work out so well.
Here's what I currently have that gets me everything except the middle dividing line:
<table style="margin: 0 auto; border: 1px solid black; table-layout: fixed">
<tr>
<td>
<img id="left_image" class="images" alt="left_image" height="auto" width="300" style="border: 2px solid #5b5b5b">
</td>
<td style="display:block;">
<div style="float: left; margin: 20px 0 0 20px;">
<table>
<tr>
<td style="width: 75px;">Name:</td><td><span id="left_name" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="left_category" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="left_id" style="font-weight: bold;"></span></td>
</tr>
</table>
</div>
<hr>
<div style="float: right; margin: 100px 20px 0 0;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="right_name" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="right_category" style="font-weight: bold"></span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="right_id" style="font-weight: bold"></span></td>
</tr>
</table>
</div>
</td>
<td>
<img id="right_image" class="images" alt="right_image" height="auto" width="300" style="border: 2px solid #5b5b5b">
</td>
</tr>
<tr>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="selectLeftID()">Select Left</button>
</td>
<td></td>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="electRightID()">Select Right</button>
</td>
</tr>
</table>
This is just experimental code, it hasn't been cleaned up yet, so please ignore all the in-line styling.
Here's a sloppy example I threw together: https://jsfiddle.net/33pc23w0/2/
I would like to make the line in code and not use any images since I'd like the elements to be flexible in size. Any suggestions on the middle lines?

Here's a quick solution. I set the main container to relative position and added two absolute position divs with appropriate borders and dimensions to handle the dividers.
.main-container {
width: 800px;
position: relative;
}
.divider-top {
position: absolute;
width: 150px;
height: 150px;
left: 300px;
border: 2px solid black;
border-left: 0px;
border-top: 0px;
}
.divider-bottom {
position: absolute;
width: 150px;
height: 167px;
top: 150px;
left: 300px;
border: 0px;
border-left: 2px solid black;
}
.details_images {
display: block;
margin: auto;
margin-top: 5px;
margin-bottom: 5px;
border-radius: 10px;
}
.btn4 {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
width: 150px;
height: 50px;
}
.btn4.focus,
.btn4:focus,
.btn4:hover {
color: #333;
text-decoration: none;
}
.btn4-confirm {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn4-confirm:active {
color: #fff;
background-color: #449d44;
border-color: #398439;
}
<div class="main-container">
<div class="divider-top"></div>
<div class="divider-bottom"></div>
<table style="width: 100%; border: 1px solid black; table-layout: fixed">
<tr>
<td>
<img id="left_image" class="images" alt="left_image" height="auto" width="200" src="https://catalogue.millsarchive.org/images/generic-icons/blank.png" style="border: 2px solid #5b5b5b">
</td>
<td style="display:block;">
<div style="float: left; margin: 20px 0 0 20px;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="left_name" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="left_category" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="left_id" style="font-weight: bold;">Blah</span></td>
</tr>
</table>
</div>
<div style="float: right; margin: 100px 20px 0 0;">
<table>
<tr>
<td style="width: 75px;">Name:</td>
<td><span id="right_name" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">Category:</td>
<td><span id="right_category" style="font-weight: bold">Blah</span></td>
</tr>
<tr>
<td style="width: 75px;">ID:</td>
<td><span id="right_id" style="font-weight: bold">Blah</span></td>
</tr>
</table>
</div>
</td>
<td>
<img id="right_image" class="images" alt="right_image" height="auto" width="200" src="https://catalogue.millsarchive.org/images/generic-icons/blank.png" style="border: 2px solid #5b5b5b">
</td>
</tr>
<tr>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="selectLeftID()">Select Left</button>
</td>
<td></td>
<td style="text-align: center;">
<button class="btn4 btn4-confirm" onclick="electRightID()">Select Right</button>
</td>
</tr>
</table>
</div>

Navigation Bar not spanning width of page

It is my first time putting together a website and I was hoping some of you might be able to help me as there seems to be a wealth of knowledge here. I am having the hardest time trying to have the navigation bar stretch across the length of the webpage. Additionally, there is a space between the photo header and the navigation bar which I'd like to get rid of. I have made it white for now, but when i hover, you can see the white space.
I included all the code (I'm sorry if it's overwhelming, but I'm not sure what's important and what's not as I am adapting it from the current code of a user who is no longer with my lab) and I would appreciate all the help I can get.
Thank you so much!
UPDATE: I have made a js fiddle as chandan suggested
http://jsfiddle.net/amchen/rzdmytqz/
I was hoping to make a website similar to the one as the tutorial I looked at:
https://helpx.adobe.com/dreamweaver/learn/tutorials/how-to/first-website-part1.html
The picture above is what I am seeing when I do a test webpage.
I hope this gives you a better idea of what I am looking for in terms of design.
THANK YOU!
<style type="text/css">
<!--
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1400px;
min height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}
#content-spacer-top {
height: 150px;
}
#content-spacer-bottom{
height:30px;
}
#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
display: block;
width: 12%;
float: left;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0;
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
#footer {
width:100%;
height:6%;
background color:#357f7f
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>
<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg')" font>
<div id="wrapper">
<div id="header"></div>
<nav id="mainnav">
<img src="images/NewTitle copy.jpg" align="middle">
<ul style="list-style: none;">
<li>HOME</li>
<li>RESEARCH</li>
<li>SUSAN TAYLOR</li>
<li>LAB MEMBERS</li>
<li>PUBLICATIONS</li>
<li>LINKS</li>
<li>CONTACT US</li>
<li>REAGENT REQUESTS</li>
</ul>
</nav>
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner">
<!-- TemplateBeginEditable name="EditRegion3" -->
<table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="20%" height="113" align="center"><a href="javascript:openWindow('Figurepanes/PKAfigure.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image14','','images/indexfigures/1over.jpg',1)"><img src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"></a> </td>
<td width="16%" align="center">
<a href="javascript:openWindow('Figurepanes/surface.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
<img src="images/indexfigures/surfout.jpg" name="Image15" width="91" height="113" border="0"></a> </td>
<td width="21%" align="center">
<a href="javascript:openWindow('Figurepanes/Rsub1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
<img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a> </td>
<td width="12%" align="center">
<a href="javascript:openWindow('Figurepanes/PBC.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
<img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a> </td>
<td width="19%" align="center">
<a href="javascript:openWindow('figurepanes/local1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
<img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a> </td>
</tr>
</table>
<table width="75%" align="center" table id="table_text">
<tr>
<th scope="col"></th>
</tr>
</table>
<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
<div class="footer" id="footer">
<div align="center">
<p>content here</p>
</div>
</div>
</div>
</body>
</html>

Try setting the width in #wrapper to 100%. Also, I don't know if it matters but your whole style section looks like it's commented out. Kinda hard to see what is going on since none of your images are visible.

It's because you have your navigation inside the main wrapper and '#wrapper' width is 1400px. Take the Navigation out of the main wrapper and it will stretch 100%;
<head>
<style type="text/css">
<!--
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1400px;
min height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}
#content-spacer-top {
height: 150px;
}
#content-spacer-bottom{
height:30px;
}
#header {
background-color: #357f7f;
height: 2%;
width: 100%;
}
#mainnav a {
display: block;
width: 12%;
float: left;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0;
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
#footer {
width:100%;
height:6%;
background color:#357f7f
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>
<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg')" font>
<div id="header"></div>
<nav id="mainnav">
<img src="images/NewTitle copy.jpg" align="middle">
<ul style="list-style: none;">
<li>HOME</li>
<li>RESEARCH</li>
<li>SUSAN TAYLOR</li>
<li>LAB MEMBERS</li>
<li>PUBLICATIONS</li>
<li>LINKS</li>
<li>CONTACT US</li>
<li>REAGENT REQUESTS</li>
</ul>
</nav>
<div id="wrapper">
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner">
<!-- TemplateBeginEditable name="EditRegion3" -->
<table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="20%" height="113" align="center"><a href="javascript:openWindow('Figurepanes/PKAfigure.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image14','','images/indexfigures/1over.jpg',1)"><img src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"></a> </td>
<td width="16%" align="center">
<a href="javascript:openWindow('Figurepanes/surface.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
<img src="images/indexfigures/surfout.jpg" name="Image15" width="91" height="113" border="0"></a> </td>
<td width="21%" align="center">
<a href="javascript:openWindow('Figurepanes/Rsub1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
<img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a> </td>
<td width="12%" align="center">
<a href="javascript:openWindow('Figurepanes/PBC.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
<img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a> </td>
<td width="19%" align="center">
<a href="javascript:openWindow('figurepanes/local1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
<img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a> </td>
</tr>
</table>
<table width="75%" align="center" table id="table_text">
<tr>
<th scope="col"></th>
</tr>
</table>
<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
<div class="footer" id="footer">
<div align="center">
<p>content here</p>
</div>
</div>
</div>
</body>
</html>

There's a few errors in your style code. Make sure you input semicolons after every style you want to implement. Also background-color should have the hyphen in between (see the #footer section in your style tag). You wont be able to expand the navbar to 100% of the screen AND have the image in the same plane unless you put both items in a . I have tried as much as I can for now. You can decrease the width of the #mainnav as you increase the size of the image. Also you need to increase the height of the header. 2% height for the header hides most of the content. I used display:inline-block to get the navbar and the image in the same plane:
<head>
<style type="text/css">
<!--
#content {
background-color: #FFFFFF;
width: 100%;
height: 100%;
margin: 0 auto;
min-height: 100%;
height: auto;
}
a {
text-decoration: none;
}
#wrapper {
background-color: #FFFFFF;
width: 1400px;
min-height: 100%;
position: relative;
height: 100%;
margin: 0 auto;
}
#content-spacer-top {
height: 150px;
}
#content-spacer-bottom{
height:30px;
}
#header {
background-color: #357f7f;
height: 100px;
width: 100%;
}
#mainnav{
height:50px;
display:inline-block;
width:1300px;
}
#mainnav img{
display:inline-block;
width:50px;
height:50px;
position:absolute;
}
#mainnav a {
display: inline-block;
width: 12%;
float:right;
text-align: center;
background-color: #FFFFFF;
color: #357F7F;
padding-top: 6px;
padding-right: 0px;
padding-bottom: 6px;
padding-left: 0px;
border-top-color: #F0F0F0;
border-right-color: #F0F0F0;
border-bottom-color: #F0F0F0;
border-left-color: #F0F0F0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
word-spacing: normal;
}
#mainnav a:hover,#mainnav a:active,#mainnav a:focus {
color: #FFFFFF;
text-decoration: none;
background-color: #357F7F;
}
a:visited {
color: #FFFFFF;
background-color: #357F7F;
}
#footer {
width:100%;
height:6%;
background:#357f7f;
position:absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.style6 {font-size: 12px}
-->
</style>
</head>
<body bgcolor="#CCCCCC" text="#000000" leftmargin="10%" topmargin="0" rightmargin="10%" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/indexfigures/surfover.jpg','images/indexfigures/3over.jpg' ,'images/indexfigures/4over.jpg','images/indexfigures/5over.jpg');">
<div id="header">
<img src="images/NewTitle copy.jpg" align="middle">
<nav id="mainnav">
<ul style="list-style: none;">
<li>HOME</li>
<li>RESEARCH</li>
<li>SUSAN TAYLOR</li>
<li>LAB MEMBERS</li>
<li>PUBLICATIONS</li>
<li>LINKS</li>
<li>CONTACT US</li>
<li>REAGENT REQUESTS</li>
</ul>
</nav>
</div>
<div id="wrapper">
<div id= "content" align="center">
<br>
<div id="content-spacer-top"> </div>
<div id="content-inner">
<!-- TemplateBeginEditable name="EditRegion3" -->
<table width="75%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="20%" height="113" align="center"><img src="images/indexfigures/1out.jpg" name="Image14" width="113" height="113" border="0"> </td>
<td width="16%" align="center">
<a href="javascript:openWindow('Figurepanes/surface.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image15','','images/indexfigures/surfover.jpg',1)">
<img src="images/indexfigures/surfout.jpg" name="Image15" width="91" height="113" border="0"></a> </td>
<td width="21%" align="center">
<a href="javascript:openWindow('Figurepanes/Rsub1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image22','','images/indexfigures/3over.jpg',1)">
<img src="images/indexfigures/3out.jpg" name="Image22" width="161" height="113" border="0"></a> </td>
<td width="12%" align="center">
<a href="javascript:openWindow('Figurepanes/PBC.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image23','','images/indexfigures/4over.jpg',1)">
<img src="images/indexfigures/4out.jpg" name="Image23" width="95" height="113" border="0"></a> </td>
<td width="19%" align="center">
<a href="javascript:openWindow('figurepanes/local1.htm')"
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image24','','images/indexfigures/5over.jpg',1)">
<img src="images/indexfigures/5out.jpg" name="Image24" width="139" height="113" border="0"></a> </td>
</tr>
</table>
<table width="75%" align="center" table id="table_text">
<tr>
<th scope="col"></th>
</tr>
</table>
<!-- TemplateEndEditable --></div>
<div id="content-space bottom"></div>
</div>
</div>
<div class="footer" id="footer">
<div align="center">
<p>content here</p>
</div>
</div>

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