Clever Geek Handbook

How can I make the text aligned with the cell below it using css?

I am developing an email and I am not sure how to make the text aligned with the lines below. I want "Our weather experts" and "LOOKING FOR YOU". stretch across the table and be flush with the rows below it, which includes the item and learn more buttons. I've tried using letter markup and various fillings, but is it possible?

It should look like this:

enter image description here

I also tried to get the string "Our Weather Experts" to be skinny text, but the font-weight: lighter attribute doesn't work either.

Any help would be greatly appreciated.

           

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">

    .borderbottom {border-bottom: 1px solid #dadada;}
    .innerpadding {padding: 30px 30px 30px 30px;}

    /* CLIENT-SPECIFIC STYLES */
    #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */
    .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing */
    body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* Prevent WebKit and Windows mobile changing default text sizes */
    table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up */
    img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */

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

    /* iOS BLUE LINKS */
    .appleBody a {color:#68440a; text-decoration: none;} 
    .appleFooter a {color:#999999; text-decoration: none;} 


</style>
</head>
<body yahoo="fix" style="margin: 0; padding: 0; ">
<table class="container" width="640" align="center" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto; padding: 0;">
<tr>
    <td valign="top" align="center" bgcolor="#ffffff">
            <div class="mobile-only" style="text-indent: -99999em; display: none; height: 0; width: 0; overflow: hidden; max-height: 0;">
                <img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Header-Mobile-320x159.jpgg" border="0">
            </div>
            <div class="no-mobile">
                <img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Header-Desktop-640x220.jpg" border="0">
            </div>
     </td>
</tr>
<tr>
    <td valign="top" align="center" bgcolor="#ffffff" style="padding:30px;" >
        <table cellpadding="0" cellspacing="0" border="0" width="600">
            <tr>
                <td colspan="2" style="letter-spacing: 3px; font-family: Arial, Helvetica, sans-serif; font-size:43px; color: #002663">
                OUR WEATHER EXPERTS
                </td>
            </tr>
            <tr>
                <td colspan="2" style="letter-spacing: 3px; font-family: Arial, Helvetica, sans-serif; font-size:36px; color: #002663">
                <strong>ARE LOOKING OUT FOR YOU.</strong>
                </td>
            </tr>
            <tr>
                            <td style="font-family: Arial, Helvetica, sans-serif; font-size:16px; color:#666666; line-height:20px; padding:20px 35px 25px 0px;" align="left" class="borderbottom">
                            Your area is likely to receive severe storms in the upcoming months. We've prepared information and tips to help protect you and your loved ones this season.
                            </td>
                            <td style="font-family: Arial, Helvetica, sans-serif; vertical-align:top; padding: 20px 0px 30px 0px"; align="left" class="borderbottom">
                                <a href="#"><img src="http://image.email-libertymutual.com/lib/fe6a15707464047f7c1c/m/1/CatAuto-Button-Learn-More-139x38.jpg" style="display:block;" width="139" height="38"></a>
                            </td>                                                       
                        </tr>
        </table>
    </td> 
</tr>
</table>

</body>
</html>
+3


source to share


1 answer


What you want to do is

text-align:justify;

but with only one line of text, it gets a little messy.

You need to add an empty container 100% wide to push the text to the end.



<span style="display:inline-block;width:100%;"></span>

It will then add extra space below the text so you need to adjust the line height.

See fiddle https://jsfiddle.net/y7vp8oz0/

0


source






More articles:


All Articles