html - How do you make text aligned with the cell below it with css? -


i'm designing email , i'm not sure how make text aligned rows below it. want "our weather experts" , "are looking out you." stretch across table , flush rows below includes paragraph , learn more button. tried using letter spacing , different sorts of padding, possible?

it's supposed this:

enter image description here

i tried "our weather experts" line skinny text, font-weight: lighter attribute doesn't seem working either.

any 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 provide "view in browser" message */     .readmsgbody{width:100%;} .externalclass{width:100%;} /* force hotmail display emails @ full width */     .externalclass, .externalclass p, .externalclass span, .externalclass font, .externalclass td, .externalclass div {line-height: 100%;} /* force hotmail display normal line spacing */     body, table, td, a{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* prevent webkit , windows mobile changing default text sizes */     table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* remove spacing between tables in outlook 2007 , */     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 {color:#68440a; text-decoration: none;}      .applefooter {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 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">                             area receive severe storms in upcoming months. we've prepared information , tips protect , loved ones 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>

what want 

text-align:justify;

but 1 line of text gets bit messy.

you need add empty container width of 100% push text end.

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

then add space below text need adjust line-heights.

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


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

jquery - javascript onscroll fade same class but with different div -

i new @ javascript , want learn new. there wrong code : why div fades @ same time. i want ask how fade different div s same class name.can me , explain me. thanks in advance. javascript: $(window).scroll(function(){ if ($( "div.fade" ).offset().top - $(window).scrolltop() <= 100){ $('.fade').addclass( "fade-in"); } else { $('.fade').removeclass("fade-in"); } }); here jsfiddle onscroll = function () { var scrolltop = $(this).scrolltop() ; $("div.fade").each(function(){ if(($(this).offset().top - scrolltop) <= 100){ $(this).toggleclass("fade-in"); } }) }
Read more