Help! Div rows and columns

HTML & CSS
1

Hi all! I’m new here. I work for a conference-based company and I create email blasts every day showcasing events we have. Most are speaker-related emails. I have been using tables for two years now and just recently wanted to try div tags instead. I have a few questions…

First, how do I make it so the speaker section has two speakers side by side? As of now it’s just one on top of the other. I’d like a few rows of two instead of a few rows of one. It shows up 4 across in my browser, but not in the preview section of Dreamweaver (I know, I use Dreamweaver which is frowned upon…). Also, is there a way to expand and center the speaker section div inside the the dark blue section? Right now, it looks a little off center and the images are not justified when previewed in the browser.

Also, how can I make the sponsor and contact sections look decent with divs instead of tables? For the contact, I have a red header with white type and a border, but I’m not sure how to translate that into divs.

Someone please help! Thanks!

Attached are my codes…

Original Code: <snip>
What I’m working on: <snip>

Links to MediaFire removed by TechnoBear. See post 3.

2

Hi nickjtopolski welcom to the forum

Sorry, but I don’t download files from MediaFire

To be clear, you’re talking about emails?

If so, email clients are not browsers and emails are not web pages. The sad truth is you will be much better off sticking with table layout, or maybe using an email service instead of doing this yourself if you want the best results.

2 Likes
3

I stupidly did download the file and my virus software started shouting at me very loudly. Both malawarebytes and Mcaffee objected strongly to the file and blocked the automatic redirect to ‘who knows where’!

I therefore deleted the download file without opening and ran a system scan. I shan’t visit mediafire again :slight_smile:

Please use something like codepen to show your problem without making us download dodgy files.

As mentioned above if you are talking about html email then tables are still the only way to do them.

5 Likes
4

Sorry about that. Here is the original code in html form:

<!DOCTYPE html>
<html lang="en" 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"> <!-- utf-8 works for most cases -->
    <meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
    <meta name="x-apple-disable-message-reformatting">  <!-- Disable auto-scale in iOS 10 Mail entirely -->
    <title>Flagship, Healthcare Realty, Insite Join Speaker Roster</title>

    <!-- Web Font / @font-face : BEGIN -->
    <!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->

    <!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
    <!--[if mso]>
<style type="text/css">
.fallback-font {
font-family: Arial, sans-serif;
}
</style>
<![endif]-->

    <!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
    <!--[if !mso]><!-->
        <link href="https://fonts.googleapis.com/css?family=Rubik:300,500,700" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Roboto:300,500,600,700" rel="stylesheet">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--<![endif]-->

    <!-- Web Font / @font-face : END -->

    <!-- CSS Reset -->
    <style>

      	/* What it does: Stops email clients resizing small text. */
        * {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
		
		/* What it does: Centers email on Android 4.4 */
        div[style*="margin: 16px 0"] {
            margin:0 !important;
        }
		
		/* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }

        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }

        /* What it does: Uses a better rendering method when resizing images in IE. */
        img {
            -ms-interpolation-mode:bicubic;
        }

        /* What it does: A work-around for email clients meddling in triggered links. */
        *[x-apple-data-detectors],	/* iOS */
        .x-gmail-data-detectors, 	/* Gmail */
        .x-gmail-data-detectors *,
        .aBn {
            border-bottom: 0 !important;
            cursor: default !important;
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }

        /* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
        .a6S {
            display: none !important;
            opacity: 0.01 !important;
        }
        /* If the above doesn't work, add a .g-img class to any image in question. */
        img.g-img + div {
            display:none !important;
           }

        /* What it does: Prevents underlining the button text in Windows 10 */
        .button-link {
            text-decoration: none !important;
        }
		
		</style>
	 
		<!-- Progressive Enhancements -->
    	<style>

        /* What it does: Hover styles for buttons */
        .button{
            transition: all 100ms ease-in; /**doubtful in emails**/
			background: #a70e12;
			border-radius: 20px;
			font-family: Helvetica, Arial, sans-serif; 
			font-size: 16px;
			text-decoration: none; 
			display: block;
			color:#ffffff;
			text-align:center;
        }
        .button:hover{
            transition: all 100ms ease-in; /**doubtful in emails**/
			background: #555;
			border-radius: 20px;
			font-family: Helvetica, Arial, sans-serif; 
			font-size: 16px;
			text-decoration: none; 
			display: block;
			color:#ffffff;
			text-align:center;
        }
			
		/* What it does: Hover styles for navbar */
		.nav{
			transition: all 100ms ease-in; /**doubtful in emails**/
			background: #a70e12;
			border-radius: 12px;
			font-family: Helvetica, Arial, sans-serif; 
			font-size: 14px;
			text-decoration: none; 
			display: block;
			color:#ffffff;
			text-align:center;
		}
		.nav:hover{
			transition: all 100ms ease-in; /**doubtful in emails**/
			background: #555;
			border-radius: 12px;
			font-family: Helvetica, Arial, sans-serif; 
			font-size: 14px;
			text-decoration: none; 
			display: block;
			color:#ffffff;
			text-align:center;
		}
			

        /* Media Queries */
        @media screen and (max-width: 480px) {

            /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
            .fluid {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }

            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }

            /* What it does: Adjust typography on small screens to improve readability */
			.email-container p {
				font-size: 17px !important;
				line-height: 22px !important;
			}
        }

    </style>

    <!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
    <!--[if gte mso 9]>
	<xml>
		<o:OfficeDocumentSettings>
			<o:AllowPNG/>
			<o:PixelsPerInch>96</o:PixelsPerInch>
		</o:OfficeDocumentSettings>
	</xml>
    <![endif]-->

	<style type="text/css">
    body, table, td, a{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
    table, td{mso-table-lspace: 0pt; mso-table-rspace: 0pt;}
    img{-ms-interpolation-mode: bicubic;}

    img{border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none;}
    table{border-collapse: collapse !important;}
    body{height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important;}

   div[style*="margin: 16px 0;"] { margin: 0 !important; }
.padding {          padding: 10px 5% 15px 5% !important;
}
	
</style>
</head>
<body bgcolor="#ececec" bgproperties="fixed" style="margin: 0; padding: 0;">
	<table align="center" border="0" cellpadding="0" cellspacing="0" width="680px">
 		<tr>
			<td align="center" valign="top" style="padding-top: 15px;"></td>
 		</tr>
 	</table>
 	<table align="center" border="0" cellpadding="0" cellspacing="0" width="680px" style="border: 1px solid #000000;">
 		<tr>
  			<td bgcolor="#ffffff">
  	<table border="0" cellpadding="0" cellspacing="0" width="100%">
		<tr>
            <td bgcolor="#a70e12" align="center" valign="top" style="padding: 10px 0 15px 0; margin-top: 0px;">
                <span style="font-family: Minion Pro, Times New Roman, serif; font-size: 36px; color: #ffffff;"><i>Last Week for Early Bird Rate</i></span>
            </td>
        </tr>
    	<tr>
        	<td bgcolor="#dce4ea" align="center" valign="top" style="padding-bottom: 10px;">
                <a href="http://interfaceconferencegroup.com/hcc2018" target="_blank"><img src="http://interfaceconferencegroup.com/hcc18/images/HCC-Banner.jpg" alt="Register Now!"></a>
            </td>
        </tr>
		<tr>
        	<td width="20%" align="center" valign="top" bgcolor="#dce4ea" style="text-align: center; padding-bottom: 15px;">
            	<center>
                	<table role="presentation" align="center" cellspacing="5" cellpadding="5" border="0" class="center-on-narrow" style="text-align: center;">
                    	<tr>
							<td width="110px">
                            	<a class="nav" href="http://www.cvent.com/events/2018-interface-healthcare-real-estate-carolinas/agenda-8b08a23acfc644a1a004eab96f1f00b1.aspx" target="_blank" bgcolor="#2d63af" style="padding: 7px 9px;">AGENDA</a>
                            </td>
							<td width="110px">
                            	<a class="nav" href="http://www.cvent.com/events/2018-interface-healthcare-real-estate-carolinas/speakers-8b08a23acfc644a1a004eab96f1f00b1.aspx" target="_blank" bgcolor="#2d63af" style="padding: 7px 9px;">SPEAKERS</a>
                            </td>
							<td width="110px">
                            	<a class="nav" href="http://www.cvent.com/events/2018-interface-healthcare-real-estate-carolinas/fees-8b08a23acfc644a1a004eab96f1f00b1.aspx" target="_blank" bgcolor="#2d63af" style="padding: 7px 9px;">REGISTER</a>
                            </td>
							<td width="110px">
                            	<a class="nav" href="http://www.cvent.com/events/2018-interface-healthcare-real-estate-carolinas/custom-17-8b08a23acfc644a1a004eab96f1f00b1.aspx" target="_blank" bgcolor="#2d63af" style="padding: 7px 9px;">SPONSORS</a>
                            </td>
							<td width="110px">
                            	<a class="nav" href="http://www.cvent.com/events/2018-interface-healthcare-real-estate-carolinas/travel-8b08a23acfc644a1a004eab96f1f00b1.aspx" target="_blank" bgcolor="#2d63af" style="padding: 7px 9px;">VENUE</a>
                            </td>
                  		</tr>
                	</table>
              	</center>
			</td>
      	</tr>
		<tr>
        	<td bgcolor="#ffffff" align="center" style="padding: 20px 20px 20px 20px;">
           		<table border="0" cellpadding="0" cellspacing="0" width="100%">
               		<tr>
                  		<td>
                     		<table width="100%" border="0" cellspacing="0" cellpadding="0">
                        		<tr>
                          			<td align="center" style="font-size: 24px; line-height: 30px; font-family: Helvetica, Arial, sans-serif; font-weight: 700; color: #333333; padding-bottom: 10px;">ATRIUM, H2C & FLAGSHIP TO SPEAK<br>AT INTERFACE HEALTHCARE RE CAROLINAS</td>
                        		</tr>
                                <tr>
                          			<td align="center" style="padding: 0 15px 10px 15px; font-size: 19px; font-family: Helvetica, Arial, sans-serif; font-weight: 600; color: #a70e12;"><i>Last Week for Early Bird Rate - Ends Thursday 4/19!</i></td>
                        		</tr>
                        		<tr>
								  <td align="left" style="padding: 0 15px 0 15px; font-size: 15px; line-height: 21px; font-family: Helvetica, Arial, sans-serif; color: #666666;">
									  <p><b>Steve Garrett of Atrium Health, PJ Camp of H2C and Gerald Quattlebaum of Flagship Healthcare Properties</b> are stand-out new additions to the InterFace Healthcare Real Estate Carolinas speaker roster.</p>
									  <p>This 8th annual conference will take place May 31st in Charlotte and bring together the leading <b>owners, investors, developers, operators and financiers</b> of healthcare and medical office real estate in North and South Carolina. National investors and developers who are active in the region will also be in attendance.</p>
									  <p>If you do business in North and South Carolina, or are looking to, <b>you really need to be at InterFace Healthcare Real Estate Carolinas on May 31st!</b></p>
									  <p><b>Early bird registration rate ends this Thursday, April 19th, so register now to get in at the discounted rate of $149.</b></p>
                          			</td>
                        		</tr>
								<tr>
                            		<td valign="top" align="center" style="text-align: center; padding: 15px 0px 10px 0px;">
                         				<table align="center">
                                 			<tr>
                                    			<td>
                                    				<a class="button" href="http://www.cvent.com/events/2018-interface-healthcare-real-estate-carolinas/fees-8b08a23acfc644a1a004eab96f1f00b1.aspx" target="_blank" style="padding: 25px 30px;">REGISTER NOW</a>
                                  				</td>
                              				</tr>
                       					</table>
									</td>
                        		</tr>
                    		</table>
                  		</td>
               		</tr>  
         		 </table>
      		</td>
  		</tr>
		<tr>
        	<td bgcolor="#dce4ea" align="center" style="padding: 20px 20px 20px 20px;">
            	<table border="0" cellpadding="0" cellspacing="0" width="100%">
              		<tr>
                		<td>
                   			<table width="100%" border="0" cellspacing="0" cellpadding="0">
                       			<tr>
                         			<td align="center" style="font-size: 24px; font-family: Helvetica, Arial; font-weight: 700; color: #333333; padding-bottom: 20px;">CONFIRMED SPEAKERS <span style="font-size: 14px; font-weight: 500;"> (As of April 17)</span></td>
                     			</tr>
                  			</table>
							<table border="0" align="center">
  					  			<tr>
									<td align="center"><img src="http://interfaceconferencegroup.com/hcc18/images/garrett_steve.png" alt="Steve Garrett" width="110" height="110" /></td>
									<td align="center"><img src="http://interfaceconferencegroup.com/hcc18/images/camp_pj.png" alt="PJ Camp" width="110" height="110" /></td>
									<td align="center"><img src="http://interfaceconferencegroup.com/hcc18/images/quattlebaum_gerald.png" alt="Gerald Quattlebaum" width="110" height="110" /></td>
									<td align="center"><img src="http://interfaceconferencegroup.com/hcc18/images/curtis_mark.png" alt="Mark Curtis" width="110" height="110" /></td>
   					  			</tr>
    							<tr>
									<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Steve Garrett</b><br /><span style="font-size: 12px; line-height: 15px;">Director, Real Estate<br />Atrium Health</span></td>
									<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>PJ Camp</b><br /><span style="font-size: 12px; line-height: 15px;">Principal &amp; Co-Founder<br />H2C</span></td>
									<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Gerald Quattlebaum</b><br /><span style="font-size: 12px; line-height: 15px;">Senior Vice President, Acquisitions<br />Flagship Healthcare Properties</span></td>
									<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Mark Curtis</b><br /><span style="font-size: 12px; line-height: 15px;">Director<br />Greenville Health System</span></td>
  					   			</tr>
			    			</table><br>
							<table border="0" align="center">
  					  			<tr>
									<td align="center"><img src="http://interfaceconferencegroup.com/hcc18/images/noble_rex.png" alt="Rex Noble" width="110" height="110" /></td>
									<td align="center"><img src="http://interfaceconferencegroup.com/hcc18/images/wilson_julie.png" alt="Julie Wilson" width="110" height="110" /></td>
									<td align="center"><img src="http://interfaceconferencegroup.com/hcc18/images/pandos_steve.png" alt="Steve Pandos" width="110" height="110" /></td>
									<td align="center"><img src="http://interfaceconferencegroup.com/hcc18/images/park_david.png" alt="David Park" width="110" height="110" /></td>
   					  			</tr>
    							<tr>
									<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Rex Noble</b><br /><span style="font-size: 12px; line-height: 15px;">SVP, Asset Management<br />Flagship Healthcare Properties</span></td>
									<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Julie Wilson</b><br /><span style="font-size: 12px; line-height: 15px;">SVP, Leasing &amp; Management<br />Healthcare Realty</span></td>
									<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Stephen Pandos</b><br /><span style="font-size: 12px; line-height: 15px;">Director of Finance<br />Insite Properties</span></td>
									<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>David Park</b><br /><span style="font-size: 12px; line-height: 15px;">Senior Vice President<br />Novant Health</span></td>
  					   			</tr>
			    			</table><br>
							<table border="0" align="center">
  					  			<tr>
									<td align="center"><img src="http://interfaceconferencegroup.com/hcc18/images/perez_tony.png" alt="Tony Perez" width="110" height="110" /></td>
									<td align="center"><img src="http://interfaceconferencegroup.com/hcc18/images/nester_lee.png" alt="Lee Nester" width="110" height="110" /></td>
									<td align="center"><img src="http://interfaceconferencegroup.com/hcc18/images/lawler_andy.png" alt="Andy Lawler" width="110" height="110" /></td>
									<td align="center"><img src="http://interfaceconferencegroup.com/hcc18/images/stubbs_john.png" alt="John Stubbs" width="110" height="110" /></td>
   					  			</tr>
    							<tr>
									<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Tony Perez</b><br /><span style="font-size: 12px; line-height: 15px;">Assistant Vice President<br />Atrium Health</span></td>
									<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Lee Nester</b><br /><span style="font-size: 12px; line-height: 15px;">Director of Property Management<br />CaroMont Regional Medical Center</span></td>
									<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Andy Lawler</b><br /><span style="font-size: 12px; line-height: 15px;">Development Partner<br />The Keith Corporation</span></td>
									<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>John Stubbs</b><br /><span style="font-size: 12px; line-height: 15px;">Partner<br />Davis More Capital</span></td>
  					   			</tr>
			    			</table><br>
							<table border="0" align="center">
  					  			<tr>
									<td align="center"><img src="http://interfaceconferencegroup.com/hcc18/images/mcmahon_jim.png" alt="Jim McMahon" width="110" height="110" /></td>
									<td align="center"><img src="http://interfaceconferencegroup.com/hcc18/images/calk_jeff.png" alt="Jeff Calk" width="110" height="110" /></td>
   					  			</tr>
    							<tr>
									<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Jim McMahon</b><br /><span style="font-size: 12px; line-height: 15px;">Senior Director<br />Capital One</span></td>
									<td align="center" valign="top" width="150" style="font-family: Helvetica, Arial, sans-serif; color: #333333; font-size: 14px; line-height: 18px; padding-top: 10px;"><b>Jeff Calk</b><br /><span style="font-size: 12px; line-height: 15px;">Partner<br />Waller</span></td>
  					   			</tr>
			    			</table>
              			</td>
             		</tr>
           		</table>
       		</td>
  		</tr>
		<tr>
        	<td bgcolor="#ffffff" align="center" style="padding: 20px 20px 20px 20px;">
           		<table border="0" cellpadding="0" cellspacing="0" width="100%">
               		<tr>
                  		<td>
                     		<table width="100%" border="0" cellspacing="0" cellpadding="0">
                        		<tr>
                       			  <td align="left" style="padding: 0 15px 0 15px; font-size: 15px; line-height: 21px; font-family: Helvetica, Arial, sans-serif; color: #666666;">
									  InterFace will also be hosting the <b>9th annual InterFace Carolinas</b> conference on the morning of May 31st, also at the Hilton. For more information, <a href="http://interfaceconferencegroup.com/carolinas2018" target="_blank">click here</a>.
                          			</td>
                        		</tr>
                    		</table>
                  		</td>
               		</tr>
         		 </table>
      		</td>
  		</tr>
		<tr>
      		<td bgcolor="#dce4ea" align="center" style="padding: 20px 20px 35px 20px;">
            	<table border="0" cellpadding="0" cellspacing="0" width="100%">
                	<tr>
                    	<td>
                        	<table width="100%" border="0" cellspacing="0" cellpadding="0">
                            	<tr>
                               		<td align="center" style="font-size: 23px; font-family: Helvetica, Arial, sans-serif; font-weight: 700; color: #333333; padding-bottom: 20px;">2018 SPONSORS</td>
                            	</tr>
                        	</table>
							<table align="center" width="450px" border="1" bordercolor="#a70e12" cellspacing="0" cellpadding="0">
                            	<tr>
   					          		<td align="center" bgcolor="#a70e12" style="padding: 8px 0 8px 0; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px;">PLATINUM SPONSORS</td>
                            	</tr>
                            	<tr>
                              		<td align="center" bgcolor="#ffffff"><img src="http://interfaceconferencegroup.com/hcc18/images/HCC-Platinum.jpg"></td>
                            	</tr>
                      		</table><br /><br />
							<table align="center" width="450px" border="1" bordercolor="#a70e12" cellspacing="0" cellpadding="0">
                            	<tr>
   					          		<td align="center" bgcolor="#a70e12" style="padding: 8px 0 8px 0; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px;">GOLD SPONSORS</td>
                            	</tr>
                            	<tr>
                              		<td align="center" bgcolor="#ffffff"><img src="http://interfaceconferencegroup.com/hcc18/images/HCC-Gold.jpg"></td>
                            	</tr>
                      		</table><br /><br />
                      		<table align="center" width="450px" border="1" bordercolor="#a70e12" cellspacing="0" cellpadding="0">
                            	<tr>
   					          		<td align="center" bgcolor="#a70e12" style="padding: 8px 0 8px 0; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px;">MEDIA & PROMOTIONAL SPONSORS</td>
                            	</tr>
                            	<tr>
                              		<td align="center" bgcolor="#ffffff"><img src="http://interfaceconferencegroup.com/hcc18/images/HCC-Media.jpg"></td>
                            	</tr>
                      		</table>
                  		</td>
             		</tr>
          		</table>
      		</td>
  		</tr>
		<tr>
         	<td bgcolor="#ffffff" align="center" style="padding: 20px 20px 20px 20px;">
            	<table border="0" cellpadding="0" cellspacing="0" width="100%">
                	<tr>
                   		<td>
                     		<table width="100%" border="0" cellspacing="0" cellpadding="0">
                          		<tr>
                    				<td align="center" style="padding: 10px 0 30px 0;">
                        				<table align="center">
                                 			<tr>
                                    			<td>
                                         			<a class="button" href="http://interfaceconferencegroup.com/hcc2018" target="_blank" style="padding: 25px 30px;">CONFERENCE WEBSITE</a>
                                   				</td>
                              				</tr>
                       					</table>
                    				</td>
                				</tr>
                      		</table>
                      		<table align="center" width="90%" border="1" bordercolor="#a70e12" cellspacing="0" cellpadding="0">
     					  		<tr>
     								<td colspan="2" bgcolor="#a70e12" align="center" style="font-size: 17px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; padding: 7px 0 7px 0;">For speaking and sponsorship information, please contact:
                    				</td>
     					  		</tr>
     					  		<tr>
     								<td bgcolor="#ffffff" align="center" style="padding: 0px; font-size: 15px; line-height: 22px; font-family: Helvetica, Arial, sans-serif; color: #666666; padding: 10px 0 10px 0;" width="50%">Richard Kelley<br />914.468.0818<br /><a href="mailto:rkelley@francemediainc.com" target="_blank">rkelley@francemediainc.com</a>
                    				</td>
     					 		</tr>
     						</table><br />
                    		<table align="center" width="90%" border="1" bordercolor="#a70e12" cellspacing="0" cellpadding="0">
     					  		<tr>
     								<td colspan="2" bgcolor="#a70e12" align="center" style="font-size: 17px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; padding: 7px 0 7px 0;">For registration and overall conference information, please contact:
                    				</td>
     					  		</tr>
     					  		<tr>
     								<td bgcolor="#ffffff" align="center" style="padding: 0px; font-size: 15px; line-height: 22px; font-family: Helvetica, Arial, sans-serif; color: #666666; padding: 10px 0 10px 0;" width="50%">Heather James-Wyrick<br />404.832.8262<br /><a href="mailto:hwyrick@francemediainc.com" target="_blank">hwyrick@francemediainc.com</a>
                    				</td>
                            		<td bgcolor="#ffffff" align="center" style="padding: 0px; font-size: 15px; line-height: 22px; font-family: Helvetica, Arial, sans-serif; color: #666666; padding: 10px 0 10px 0;" width="50%">Alicia Turlington<br />404.832.8262<br /><a href="mailto:aturlington@francemediainc.com" target="_blank">aturlington@francemediainc.com</a>
                    				</td>
     					 		</tr>
     						</table><br />
						</td>
              		</tr>
           		</table>
        	</td>
  		</tr>
  		<tr>
    		<td bgcolor="#000000" align="center" style="padding: 15px 0 15px 0;">
         		<table border="0" cellpadding="0" cellspacing="0" width="100%">
           			<tr>
             			<td align="center" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; color: #ffffff;">InterFace Conference Group is a division of France Media, Inc.
                       	</td>
                	</tr>
         		</table>
      		</td>
  		</tr>
  
  
</table>
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="650px">
 		<tr>
			<td align="center" valign="top" style="padding-top: 15px;"></td>
 		</tr>
</table>
</body>
</html>
5

Off Topic:
@nickjtopolski: when you post code on the forums, you need to format it so it will display correctly.

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

6

This place won’t let me upload files or post images. I don’t know know what else to do. I’m pretty limited here. Sorry. I can email them if that works?. Other than that, I’m at a loss.

We use KM Marketing here for the email blasts which I’m not a fan of, but we send to 50K+ people, so Mailchimp and such are out of the question and too expensive.

This litmus template I found has all div tags and looks really nice and responsive. Maybe divs are the future?

7

You need to progress to Trust Level 1 for that. It shouldn’t take long. See An Explanation of Trust Levels.

8

Ok. Thank you.

1 Like
9

The code you posted is a web page, not an email. If you want to use that as a starting point for emails you have some work ahead of you.

Where I’d start is dealing with the fact that email clients don’t do <head> ... </head>. So all of that CSS needs to be taken out of <style> ... </style> and put in the tags they target as inline style attribute values.

1 Like
10

This old article on Sitepoint seems to present a bare-bones approach to starting your email template: https://www.sitepoint.com/html-email-boilerplate/

This page in Sitepoint is more practical. It shows several ways to format an email, including a multi-column layout: https://www.sitepoint.com/tricks-building-responsive-email/

1 Like
11

That indeed seems to be an email template and is coded correctly for email. You don’t want to change that to divs as it will not work in email clients properly as they are still back in the dark ages.

There is no point converting that to divs unless you don’t want it to work in email clients like outlook etc.

If you want to build a web page then yes never use tables for layout ever again:)

I think you may need to clarify your intentions as we are all guessing at which direction you want to go:)

2 Likes
12

Ok. Yeah, you’re right. I will keep the tables for the email. I know… never use tables for web pages. Thanks!

13

Never for page layout. :eek:

HTML tables are perfectly appropriate for tabular data… the stuff that might be found in a spreadsheet.

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.