Menu icon Foundation
Zurb Ink Framework not aligning properly

Hello all. This is my first post, so please be kind.

I am trying to create a responsive email using the Ink Framework, but I have run into a problem. I am trying to align a 3 column table and a 9 column table inside another table, but when I try this the email framework completly breaks. I have tried many things, but I cannot seem to get it to work.

I have included the code that I have done, so you can see what I mean.

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width"/>

        <link rel="stylesheet" href="ink.css"> <!-- For testing only -->

            <style type="text/css">

                /* Ink styles go here in production */

            </style>
            <style type="text/css">
                body {background: #cccccc;}
                h2 {font-size: 18px; color: #444444;}
                p {font-size: 12px;}
                .mt10 {margin-top: 10px;}
                .mb10 {margin-bottom: 10px;}
                .alignLeft {text-align: left;}
                .alignCenter {text-align: center;}
                .alignRight {text-align: right;}
                .header {background: #0F75C3;}
                .emailBg {background: #ffffff;}
                .borderRadius {border-radius: 5px;}
                .date {color: #999999; font-size: 10px}
            </style>
    </head>
    <body>
        <table class="body">
            <tr>
                <td class="center" align="center" valign="top">
                    <center>

                        <table class="container">
                            <tr>
                                <td>

                                    <table class="row header">
                                        <tr>
                                            <td class="wrapper">

                                                <table class="six columns">
                                                    <tr>
                                                        <td class="left-text-pad">

                                                            <p><a href="#" title="Forward to a friend">Forward to a friend</a> | <a href="#" title="Visit our website">Visit our website</a></p>
                                                            

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                            <td class="wrapper last">

                                                <table class="six columns">
                                                    <tr>
                                                        <td class="right-text-pad">

                                                            <p class="alignRight"><a href="#" title="Sales and Support: 0121 111 1111">Sales and Support: 0121 111 1111</a></p>

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                        </tr>
                                    </table>

                                </td>
                            </tr>
                        </table>
                        
                        <table class="container">
                            <tr>
                                <td>

                                    <table class="row emailBg mb10">
                                        <tr>
                                            <td class="wrapper">

                                                <table class="six columns">
                                                    <tr>
                                                        <td class="left-text-pad">

                                                            <img src="images/logo.jpg" width="width" height="hight" alt="logo"/>
                                                            

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                            <td class="wrapper last">

                                                <table class="six columns">
                                                    <tr>
                                                        <td class="right-text-pad">

                                                            <p class="alignCenter">Having trouble viewing this email?</p>
                                                            <p class="alignCenter"><a href="#" title="Click Here">Click Here</a> to view the hosted version.</p>

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                        </tr>
                                    </table>
                                    
                                    
                                    
                                    <table class="row emailBg mb10 borderRadius">
                                        <tr>
                                            
                                            <td class="wrapper last">

                                                <table class="twelve columns">
                                                    <tr>
                                                        <td class="text-pad">

                                                            <img src="images/ny.jpg" alt="New York City" />

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                        </tr>
                                    </table>
                                    
                                    <table class="row emailBg mb10 borderRadius">
                                        <tr>
                                            
                                            <td class="wrapper last">

                                                <table class="twelve columns">
                                                    <tr>
                                                        <td class="text-pad">

                                                            <p class="date">20th August 2014</p>
                                                            <h2>Fresh, and professional Newsletter solution for your business</h2>

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                        </tr>
                                        <tr>
                                            
                                            <td class="wrapper">

                                                <table class="three columns">
                                                    <tr>
                                                        <td class="text-pad">

                                                            <p class="date">20th August 2014</p>
                                                            <h2>Fresh, and professional Newsletter solution for your business</h2>

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                            <td class="wrapper last">

                                                <table class="nine columns">
                                                    <tr>
                                                        <td class="text-pad">

                                                            <p>Fresh Newsletter is professional and very customizable. It comes in 10 layouts, 12 color themes, Layered and sliced PSD file which contains all graphic Elements of each theme for any color changes you want, commented HTML pages, and user friendly help manual which covers customization steps and instructions how to mix and create new layouts.</p>
                                                            

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                        </tr>
                                        
                                        
                                        
                                    </table>

                                </td>
                            </tr>
                        </table>

                    </center>
                </td>
            </tr>
        </table>
    </body>
</html>
            

         

I really don't know what I am doing wrong and any help would be grately appricated.

Thanks

zurbinkemail

Hello all. This is my first post, so please be kind.

I am trying to create a responsive email using the Ink Framework, but I have run into a problem. I am trying to align a 3 column table and a 9 column table inside another table, but when I try this the email framework completly breaks. I have tried many things, but I cannot seem to get it to work.

I have included the code that I have done, so you can see what I mean.

<!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width"/>

        <link rel="stylesheet" href="ink.css"> <!-- For testing only -->

            <style type="text/css">

                /* Ink styles go here in production */

            </style>
            <style type="text/css">
                body {background: #cccccc;}
                h2 {font-size: 18px; color: #444444;}
                p {font-size: 12px;}
                .mt10 {margin-top: 10px;}
                .mb10 {margin-bottom: 10px;}
                .alignLeft {text-align: left;}
                .alignCenter {text-align: center;}
                .alignRight {text-align: right;}
                .header {background: #0F75C3;}
                .emailBg {background: #ffffff;}
                .borderRadius {border-radius: 5px;}
                .date {color: #999999; font-size: 10px}
            </style>
    </head>
    <body>
        <table class="body">
            <tr>
                <td class="center" align="center" valign="top">
                    <center>

                        <table class="container">
                            <tr>
                                <td>

                                    <table class="row header">
                                        <tr>
                                            <td class="wrapper">

                                                <table class="six columns">
                                                    <tr>
                                                        <td class="left-text-pad">

                                                            <p><a href="#" title="Forward to a friend">Forward to a friend</a> | <a href="#" title="Visit our website">Visit our website</a></p>
                                                            

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                            <td class="wrapper last">

                                                <table class="six columns">
                                                    <tr>
                                                        <td class="right-text-pad">

                                                            <p class="alignRight"><a href="#" title="Sales and Support: 0121 111 1111">Sales and Support: 0121 111 1111</a></p>

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                        </tr>
                                    </table>

                                </td>
                            </tr>
                        </table>
                        
                        <table class="container">
                            <tr>
                                <td>

                                    <table class="row emailBg mb10">
                                        <tr>
                                            <td class="wrapper">

                                                <table class="six columns">
                                                    <tr>
                                                        <td class="left-text-pad">

                                                            <img src="images/logo.jpg" width="width" height="hight" alt="logo"/>
                                                            

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                            <td class="wrapper last">

                                                <table class="six columns">
                                                    <tr>
                                                        <td class="right-text-pad">

                                                            <p class="alignCenter">Having trouble viewing this email?</p>
                                                            <p class="alignCenter"><a href="#" title="Click Here">Click Here</a> to view the hosted version.</p>

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                        </tr>
                                    </table>
                                    
                                    
                                    
                                    <table class="row emailBg mb10 borderRadius">
                                        <tr>
                                            
                                            <td class="wrapper last">

                                                <table class="twelve columns">
                                                    <tr>
                                                        <td class="text-pad">

                                                            <img src="images/ny.jpg" alt="New York City" />

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                        </tr>
                                    </table>
                                    
                                    <table class="row emailBg mb10 borderRadius">
                                        <tr>
                                            
                                            <td class="wrapper last">

                                                <table class="twelve columns">
                                                    <tr>
                                                        <td class="text-pad">

                                                            <p class="date">20th August 2014</p>
                                                            <h2>Fresh, and professional Newsletter solution for your business</h2>

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                        </tr>
                                        <tr>
                                            
                                            <td class="wrapper">

                                                <table class="three columns">
                                                    <tr>
                                                        <td class="text-pad">

                                                            <p class="date">20th August 2014</p>
                                                            <h2>Fresh, and professional Newsletter solution for your business</h2>

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                            <td class="wrapper last">

                                                <table class="nine columns">
                                                    <tr>
                                                        <td class="text-pad">

                                                            <p>Fresh Newsletter is professional and very customizable. It comes in 10 layouts, 12 color themes, Layered and sliced PSD file which contains all graphic Elements of each theme for any color changes you want, commented HTML pages, and user friendly help manual which covers customization steps and instructions how to mix and create new layouts.</p>
                                                            

                                                        </td>
                                                        <td class="expander"></td>
                                                    </tr>
                                                </table>

                                            </td>
                                        </tr>
                                        
                                        
                                        
                                    </table>

                                </td>
                            </tr>
                        </table>

                    </center>
                </td>
            </tr>
        </table>
    </body>
</html>
            

         

I really don't know what I am doing wrong and any help would be grately appricated.

Thanks

Joshmanbc almost 5 years ago

use sub-columns with in example

<table class="twelve columns">
  <tr>
       <td class="six sub-columns">
                 <img src="http://placehold.it/200x50">
      </td>
      <td class="six sub-columns last" style="text-align:right; vertical-align:middle;">
                <span class="template-label">SIDEBAR HERO</span>
       </td>
      <td class="expander"></td>
      </tr>
 </table>