Ideja je da se koristi nekakav alat za HTML i da se umjesto <div> koristi <table>.
Evo primjer:
<table style="width: 100%;"> <tbody> <tr> <td style="width: 20%;" align="center"><img src="https://promocija-bb.hr/promocija_potpis_Zrinka.png" width="100" height="97" /></td> <td style="width: 80%; vertical-align: top;"> <p style="font-family: arial narrow, sans-serif; color: #666666; font-size: 13px;"><strong>Zrinka Bilokapić | Promocija BB</strong><br />114. brigade 10, 21 000 Split, Hrvatska<br /><span style="color: #d23328;">m</span>: +385 91 33 51 208 | <span style="color: #d23328;">e</span>: <a style="color: #666666; text-decoration: none;" href="mailto:zbilokapic@promocija-bb.hr">zbilokapic@promocija-bb.hr</a></p> </td> </tr> </tbody> </table>
evo kako izgleda:
<table style="width: 100%;"> <tbody> <tr> <td style="width: 20%;" align="center"><img src="https://promocija-bb.hr/promocija_potpis_Zrinka.png" width="100" height="97" /></td> <td style="width: 40%; vertical-align: top;"> <p style="font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; color: #666666; font-size: 16px;"><strong>Zrinka Bilokapić</strong><br /><span style="font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; color: #666666; font-size: 12px;">114. brigade 10, 21 000 Split, Hrvatska<br />Promocija BB | #svezamarketing</span></p> </td> <td style="width: 40%; vertical-align: top;"> <div style="border: solid 0 #28AAE1; border-left-width: 1px; padding-left: 0.5ex;"> <table style="width: 100%;"> <tbody> <tr> <td style="width: 10%;"><img src="https://promocija-bb.hr/phone-message.png" width="15" /></td> <td style="width: 90%;"><span style="font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; color: #666666; font-size: 12px;">+385 91 335 1208</span></td> </tr> <tr> <td style="width: 10%;"><img src="https://promocija-bb.hr/paper-plane.png" width="15" /></td> <td style="width: 90%;"><span style="font-size: 12px;"><span style="font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; color: #666666;"><a style="color: #666666; text-decoration: none;" href="mailto:vizuali@promocija-bb.hr">vizuali@promocija-bb.hr</a></span></span></td> </tr> <tr> <td style="width: 10%;"><img src="https://promocija-bb.hr/link.png" width="15" /></td> <td style="width: 90%;"><span style="font-size: 12px;"><a style="color: #666666; text-decoration: none;" href="https://promocija-bb.hr/"><span style="font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; color: #666666;">promocija-bb.hr</span></a></span></td> </tr> <tr> <td style="width: 10%;"><img src="https://promocija-bb.hr/maps-and-flags.png" width="15" /></td> <td style="width: 90%;"><span style="font-size: 12px;"><a style="color: #666666; text-decoration: none;" href="https://g.page/PromocijaBB?share"><span style="font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif; color: #666666;">114.brigade 10, 21 000 Split, HR</span></a></span></td> </tr> </tbody> </table> </div> </td> </tr> </tbody> </table> <hr style="border-top: 1px solid #28AAE1;" /> <table style="width: 100%;"> <tbody> <tr> <td style="width: 30%;"><a href="https://promocija-bb.hr/"><img src="https://promocija-bb.hr/Promocija_logo_50pix.png" width="200" /></a></td> <td style="width: 70%;" align="right"><a href="https://www.linkedin.com/company/promocija-bb/"><img src="https://promocija-bb.hr/linkedin.png" width="25" /></a> <a href="https://www.facebook.com/PromocijaBB/"><img src="https://promocija-bb.hr/facebook.png" width="25" /></a></td> </tr> </tbody> </table>