I'm new here and I was wondering: how do I align my header to the top of the page? Right now there is too much white space between the header and top of the page. Is there a way to 'valign' it to the top somehow? Any help is appreciated. Thank you. Attached is my html code as well as CSS.
#charset "UTF-8";
/* CSS Document */
body {
margin: 0;
padding-top: 0;
padding-left: 10px;
padding-right: 10px;
font-family: Helvetica, sans-serif;
color: #666;
}
h1 {
color: #333;
font-size: 32px;
line-height: 38px;
font-weight: 700;
text-align: center;
margin-bottom: 15px;
}
h2 {
color: #fff;
font-family: Minion Pro, Times New Roman, serif;
font-size: 42px;
font-weight: 700;
font-style: italic;
text-align: center;
padding-top: 25px;
margin-bottom: 15px;
}
h3 {
color: #333;
font-size: 26px;
font-weight: 700;
text-align: center;
}
h5 {
font-size: 18px;
font-weight: normal;
text-align: center;
margin-top: 0;
}
p,
ul {
font-size: 16px;
line-height: 23px;
font-weight: normal;
text-align: left;
}
.container {
padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.container2 {
padding-top: 10px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 10px;
background-color: #dce4ea;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.container3 {
background-color: #375e97;
margin-right: auto;
margin-left: auto;
max-width: 850px;
top: 0;
}
.container4 {
padding-right: 15px;
padding-left: 15px;
padding-top: 25px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.subhead {
color: #fff;
font-family: Minion Pro, Times New Roman, serif;
font-size: 28px;
font-weight: normal;
font-style: italic;
text-align: center;
padding-bottom: 25px;
margin-top: 0px;
}
.title {
color: #fff;
padding: 5px;
font-size: 20px;
font-weight: 500;
text-align: center;
margin-top: 8px;
margin-bottom: 8px;
}
.cell {
font-size: 17px;
font-weight: normal;
text-align: center;
margin-bottom: 9px;
margin-top: 9px;
}
.refund {
font-size: 14px;
line-height: 22px;
font-weight: normal;
text-align: left;
}
.button {
transition: all 100ms ease-in;
/**doubtful in emails**/
background: #375e97;
border-radius: 8px;
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: 8px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-decoration: none;
display: block;
color: #ffffff;
text-align: center;
}
<html lang="en">
<head>
<title>Multifamily Texas – Early Bird Registration</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
</head>
<body>
<div class="container3">
<h2>ACT NOW and SAVE $80!</h2>
<p class="subhead">Early Bird Registration is $279 through August 17th</p>
</div>
<div class="container4">
<table align="center" width="600" border="1" bordercolor="#375e97" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#375e97" align="center" colspan="2">
<p class="title">Early Bird Registration Pricing</p>
</td>
</tr>
<tr>
<td width="50%">
<p class="cell">Single Attendee</p>
</td>
<td width="50%">
<p class="cell">$279</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee">
<p class="cell">Two Attendees</p>
</td>
<td width="50%" bgcolor="#d3daee">
<p class="cell">$568</p>
</td>
</tr>
<tr>
<td width="50%">
<p class="cell">Three Attendees</p>
</td>
<td width="50%">
<p class="cell">$857</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee">
<p class="cell">Four Attendees</p>
</td>
<td width="50%" bgcolor="#d3daee">
<p class="cell">$1146</p>
</td>
</tr>
<tr>
<td width="50%">
<p class="cell">Five Attendees</p>
</td>
<td width="50%">
<p class="cell">$1435</p>
</td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee">
<p class="cell">Six Attendees</p>
</td>
<td width="50%" bgcolor="#d3daee">
<p class="cell">$1724</p>
</td>
</tr>
</table>
</div>
<div class="container">
<h3>Refund Policy</h3>
<p class="refund"><b>InterFace Conference Group/France Media, Inc. Cancellation Policy:</b> If you cancel your attendance 30 days or more before the conference, you will be issued a full refund. Within 30 days, you will be given a credit for the amount you paid. This
credit must be used within one year of the conference date to apply to another InterFace conference, for an equal or lesser amount.</p>
<p class="refund" align="center">InterFace Conference Group/France Media, Inc. Attendance & Substitution Policy and <a href="https://custom.cvent.com/7C0825B3546540A3BA33AF202D8A465F/files/4c106328c8e140e4b66ba30f4659af92.docx"
target="_blank">Privacy Policy</a></p>
</div>
</body>
</html>
It's because of the <h2>'s margin-top not being removed. Update this rule:
h2 {
color: #fff;
font-family: Minion Pro, Times New Roman, serif;
font-size: 42px;
font-weight: 700;
font-style: italic;
text-align: center;
padding-top: 25px;
margin-bottom: 15px;
margin-top: 0; /* This one */
}
Preview
Related
I am trying to create a certificate in an html email. I cannot get the border to extend to the right alignment. Below is my code and an image of it. I know that html in outlook doesnt behave the same way but I do want instructor and manager on the same line inside the border. Float doesnt work and I could not get the margins to work.
CSS Code
<pre>
<style>
.cert {
border: 15px solid #0072c6;
border-right: 15px solid #0894fb;
border-left: 15px solid #0894fb;
width: 700px;
font-family: arial;
color: #383737;
overflow: visible;
}
.crt_title {
margin-top: 30px;
font-family: "Satisfy", cursive;
font-size: 40px;
letter-spacing: 1px;
color: #0060a9;
}
.crt_logo img {
width: 130px;
height: auto;
margin: auto;
padding: 30px;
}
.colorGreen {
color: #27ae60;
}
.crt_user {
display: inline-block;
width: 20%;
padding: 5px 25px;
margin-bottom: 0px;
padding-bottom: 0px;
font-family: "Satisfy", cursive;
font-size: 40px;
border-bottom: 1px dashed #cecece;
}
.signature{
font-family: 'Brush Script MT', cursive;
font-size: 40px;
letter-spacing: 3px;
text-decoration: underline;
}
.normal{
font-family: 'Arial';
font-size: 40px;
letter-spacing: 3px;
}
.afterName {
font-weight: 100;
color: #383737;
}
.colorGrey {
color: grey;
}
.certSign {
width: 200px;
}
#media (max-width: 700px) {
.cert {
width: 100%;
}
.tableClass {
margin: 0px 0px 0px 0px !important;
padding: 0px 0px 20px 0px !important;
}
</style>
</pre>
HTML Code
<table al[![enter image description here][1]][1]ign="center" width="600" border="0" cellpadding="0" cellspacing="0" class="cert">
<tr>
<td width="70%" align="center" class="crt_logo">
<img src="logo path"width="200" height="121" alt="logo">
</td>
</tr>
<tr>
<td width="70%" align="center">
<h1 class="crt_title">Certificate Of Completion
<h2>This Certificate is awarded to</h2>
<h1 class="colorGreen crt_user">Name</h1>
<h3 class="afterName">For completion in Class
</h3>
<h3>Awarded on Date taken</h3></td>
</tr>
<tr>
<td align="left" valign ="middle" style="font-family: 'Brush Script MT', cursive;
font-size:30px; text-decoration: underline;display:inline:">Instructor </td>
<td width="10px" align="left" valign ="middle" style="font-family: 'Brush Script MT',
cursive; font-size:30px; text-decoration: underline;display:inline:">Manager</td>
</td>
</td>
</tr>
</table>
I am new to coding (so go easy on me) doing this project for fun and I'm pretty close to being complete but I can't seem to get rid of this 2-5 px white space dividing my header from the first section. See the screenshot below:
I set all element margins to 0 such as
* {
margin: 0
}
but this didn't help.
the following code uses tables with inline CSS. Can somebody help me!
table.t00 {
width: 640px;
margin: 0;
}
table.t00 th {
max-width: 630px;
max-height: 474px;
}
table.t01 {
height: 162px;
width: 640px;
background-color: #1ab3ba;
}
table.t01 tbody {
text-align: center;
color: #f1f1f1
}
table.t01 th {
width: 636px;
}
table.t02 {
width: 640px;
background-color: white
}
table.t02 tbody {
text-align: center;
width: 634px;
height: 291px;
}
table.t02 th {
width: 634px;
}
table.t03 {
width: 634px;
height: 320px;
}
table.t03 tbody {
text-align: center;
width: 634px;
height: 320px;
padding-top: 60px;
}
table.t03 th {
width: 634px;
padding-bottom: 40px;
}
table.t04 {
width: 640px;
height: 84px;
background-color: #052f66;
}
table.t04 tbody {
text-align: center;
}
<body>
<table class="t00">
<tbody>
<th style="margin: 0;">
<img
class="header-image"
src="victory-club header.jpg"
alt="header for victory clubs membership"
/>
</th>
</tbody>
</table>
<table class="t01">
<tbody>
<th>
<p style="font-family: Georgia, 'Times New Roman', Times, serif; font-size: 28px; margin: 10px 0;">Your Member ID is:
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 36px; margin: 0;">FL-9999999</h2>
<p style=" font-size: 14px;
font-style: italic; margin: 5px 0;">Please keep this for your records</h4>
</th>
</tbody>
</table>
<table class="t02">
<tbody>
<th>
<p style="padding-top: 3%;
color: #052f66;
font-size: 28px;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center; width: 634px; margin: 25px 0px 0px 0px">
Member Benefits
</p>
<br>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;">These are just some of the amazing benefits that come with your <br> Victory Clubs membership!</p>
<br>
<br>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Exclusive events and parties at local venues for Victory Clubs members only.</p>
<div style="background-color: white;
width: 634px;
height: 7px;"></div>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Deals and Savings at hundreds of retail and restaurant locations.
<div style="background-color: white;
width: 634px;
height: 7px;"
></div>
<p style="background-color: #eeeeee;
height: 44px;
padding-top: 26px;
text-align: center;
margin: 0 12px;
color: #378bac;">Exclusive Perks through your School.</p>
</div>
</th>
</tbody>
</table>
<table class="t03">
<tbody class="schedule">
<th>
<p style=" padding-top: 3%;
color: #052f66;
font-size: 28px;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: center;">
Schedule Now!
</p>
<br>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px; margin: 0 59px;">Schedule and pass your initial drug test now so you can start enjoying all the perks and benefits your Victory Clubs membership has to offer.
</p>
<br>
<br>
<button style="display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 100px;
border: 1px solid;
color: white;
border-color: #dc1d40;
background-color: #dc1d40;">SHEDULE MY DRUG TEST</button>
<br>
<br>
<br>
<p style="color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px; margin: 0 59px;">
You’ll receive an email letting you know your free 90-day subscription has been activated once you pass your drug test.
</p>
<p style="color: #052f66;
text-align: center;
font-size: 16px; margin: 0 59px;">
<b> Keep up the great work!</b>
</p>
<br>
</th>
</tbody>
</table>
<table class="t04">
<tbody>
<th>
<ul style="padding: 20px;">
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">FB</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;"href="" target="_blank">Twitter</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">Insta</a></li>
<li style=" list-style-type: none;
display: inline-flex;"><a style="color: white;" href="" target="_blank">Youtube</a></li>
</ul>
<p style=" color: #898989;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
height: 32px;">© All Rights Reserved. Privacy Policy | Accessibility Policy | Terms & Conditions</p>
</th>
</tbody>
<table>
</body>
Try adding this code:
table.t00 th img {
display: block;
}
One thing about images is that they have a default display: inline-block which makes them leave margins around other elements ... putting block display eliminates this effect
Also try adding
table.t00 {
border-collapse: collapse;
}
instead of having separate which is the default behaviour
<table> have border-spacing and by default it's value is 2px..so change it to 0 ....
border-spacing: 0px;
for both of your tables...t00 and t01
table.t00 {
width: 640px;
margin: 0;
border-spacing: 0px;
}
table.t01 {
height: 162px;
width: 640px;
background-color: #1ab3ba;
border-spacing: 0px;
}
I am working on responsive newsletter using HTML, inline css as much as possible and some css also.
I am facing issue in design as i am not able to remove space between first Image and second table after image..
https://codepen.io/KGuide/full/oNXwyEW
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background: #fff;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
/* -ms-interpolation-mode:bicubic; */
}
a {
text-decoration: none;
}
.primary{
background: #f5564e;
}
.bg_white{
background: #ffffff;
}
.bg_light{
background: #fafafa;
}
.bg_black{
background: #000000;
}
.bg_dark{
background: rgba(0,0,0,.8);
}
.email-section{
padding:2.5em;
}
/*BUTTON*/
.btn{
padding: 5px 15px;
display: inline-block;
}
.btn.btn-primary{
border-radius: 5px;
background: #f5564e;
color: #ffffff;
}
.btn.btn-white{
border-radius: 5px;
background: #ffffff;
color: #000000;
}
.btn.btn-white-outline{
border-radius: 5px;
background: transparent;
border: 1px solid #fff;
color: #fff;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Nunito Sans', sans-serif;
color: #000000;
margin-top: 0;
}
body{
font-family: 'Nunito Sans', sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.8;
color: rgba(0,0,0,.4);
}
a{
color: #f5564e;
}
table{
}
/*LOGO*/
.logo h1{
margin: 0;
}
.logo h1 a{
color: #000;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
font-family: 'Nunito Sans', sans-serif;
}
.navigation{
padding: 0;
}
.navigation li{
list-style: none;
display: inline-block;;
margin-left: 5px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.navigation li a{
color: rgba(0,0,0,.6);
}
/*HERO*/
.hero{
position: relative;
z-index: 0;
}
.hero .overlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
width: 100%;
background: #000000;
z-index: -1;
opacity: .3;
}
.hero .icon{
}
.hero .icon a{
display: block;
width: 60px;
margin: 0 auto;
}
.hero .text{
color: rgba(255,255,255,.8);
padding: 0 4em;
}
.hero .text h2{
color: #ffffff;
font-size: 40px;
margin-bottom: 0;
line-height: 1.2;
font-weight: 900;
}
/*HEADING SECTION*/
.heading-section{
}
.heading-section h2{
color: #000000;
font-size: 24px;
margin-top: 0;
line-height: 1.4;
font-weight: 700;
}
.heading-section .subheading{
margin-bottom: 20px !important;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(0,0,0,.4);
position: relative;
}
.heading-section .subheading::after{
position: absolute;
left: 0;
right: 0;
bottom: -10px;
content: '';
width: 100%;
height: 2px;
background: #f5564e;
margin: 0 auto;
}
.heading-section-white{
color: rgba(255,255,255,.8);
}
.heading-section-white h2{
font-family:
line-height: 1;
padding-bottom: 0;
}
.heading-section-white h2{
color: #ffffff;
}
.heading-section-white .subheading{
margin-bottom: 0;
display: inline-block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,.4);
}
.icon{
text-align: center;
}
.icon img{
}
<!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></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
</head>
<style>
</style>
<body>
<table style="width:100%; text-align:center;">
<tr>
<td style="width:100%; text-align:center; border-spacing: 0px;" >
<table align="center" style="width:100%; max-width:600px;">
<tr>
<td ><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
</tr>
<tr>
<td class="">
<table style="width:100%; background:#525252; max-width:600px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> Move-in now to your dream home in City Center Plaza
</td>
</tr>
<tr>
<td align="center" style="padding:15px; background:#0A0A0A;"> BUTTON </td>
</tr>
<tr>
<td style="padding:15px; background:#0A0A0A;">TEXT TEXT TEXT TEXT TEXT</td>
</tr>
<tr>
<td><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"> </td>
</tr>
<tr>
<td valign="top" align="center" style="padding:15px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Replace your code with this and see if this works:
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:100%; max-width:600px; border-collapse: collapse;">
<tr>
<td>
<img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="margin: 0; border: 0; padding: 0; display: block; width:100%; max-width: 600px;">
</td>
</tr>
Edit:
Here is 2 tutorials they helped me while creating HTML emails:
Build an HTML Email Template From Scratch
How to Code a Responsive Email from Scratch
As pointed out by the other user, some of that space is coming from the the font size.
What I recommend is using either:
line-height: 0;
or
font-size: 0;
To remove that, and then put all text inside spans to put the size back up.
You also need to remove the padding from your cells,
tr, td {
padding: 0;
}
Complete changes required:
tr, td {
padding: 0;
line-height: 0;
}
span {
line-height: 1;
}
Plus wrap all text in spans.
use "font-size: 0;"
and I think solve your problem
Example:-
<td style="font-size: 0;"><img src="https://dummyimage.com/600x400/cf30cf/fff.jpg" alt="" style="width:100%; max-width: 600px;"></td>
Given the following HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Midweek Meeting Schedule</title>
<style type="text/css">
/* Column widths */
.columnTime {
width: 7%;
}
.columnTheme1Class {
width: 76%;
}
.columnName {
width: 17%;
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
table th, td {
/* Comment out the following line if you do not want borders */
border: 1px #d3d3d3 solid;
/* This is the default font for all cells */
font-family: Calibri;
}
table tbody tr:hover td {
color: #000;
background: #efefef;
}
body{
width:100%;
margin-left: 0;
margin-right: 0;
background: #666;
}
.containerPage {
min-width: 210mm;
max-width: 210mm;
padding-left: 2mm;
padding-right: 2mm;
margin-left: auto;
margin-right: auto;
background: #FFF;
}
.containerMeeting {
margin-bottom: 5mm;
}
.cellTime {
padding-left: 3mm;
padding-right: 5mm;
font-size: 9pt;
font-weight: 700;
color: gray;
}
.cellName {
font-size: 10pt;
font-weight: normal;
}
.floatRight {
color: gray;
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 2mm;
float: right;
text-align: right;
font-size: 8pt;
font-weight: 700;
text-transform: none;
}
.tableAYFM {
margin-bottom: 2mm;
}
.textAYFM {
padding-left: 1mm;
padding-top: 1mm;
padding-bottom: 1mm;
color: #fff;
background-color: #c18626;
width: 90mm;
font-size: 10pt;
font-weight: 700;
}
.bulletAYFM {
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 1mm;
color: #c18626;
font-size: 14pt;
font-weight: normal;
}
.cellClass {
font-size: 8pt;
font-weight: 700;
vertical-align: bottom;
color: gray;
}
.textDuration {
padding-left: 1mm;
font-family: Calibri;
font-size: 9pt;
font-weight: normal;
}
.textTheme {
font-size: 11pt;
font-weight: normal;
}
#media print {
body{
background: #FFF;
}
.containerPage, .containerMeeting, .tableAYFM {
width: 99%;
min-width: 99%;
max-width: 99%;
padding-left: 0;
padding-right: 0;
margin-left:auto;
margin-right:auto;
}
}</style>
</head>
<body>
<div class="containerPage">
<div class="containerMeeting">
<table class="tableAYFM">
<colgroup>
<col class="columnTime" />
<col class="columnTheme1Class" />
<col class="columnName" />
</colgroup>
<tr>
<td class="cellTime">19:49</td>
<td>
<div class="floatRight">
Student:<br />
Assistant:</div>
<span class="bulletAYFM">•</span> <span class="textTheme">Initial
Call</span> <span class="textDuration">(2 min. or less)
<span lang="en-gb">THIS IS EXTRA TEXT.<br />
I FORCE IT TO HAVE 3 LINES.<br />
HERE IS THE REST.</span></span></td>
<td class="cellName">Name 1<br />
Name 2</td>
</tr>
</table>
</div>
</div>
</body>
</html>
This is what it looks like (area in question highlighted in yellow):
Is it possible to get that div to align vertically, whatever amount of text there is to the left of it? So that it is better aligned with the adjacent cell?
Thank you.
You could add a column for the "position titles":
/* Column widths */
.columnTime {
width: 7%;
}
.columnTheme1Class {
width: 65%;
}
.columnName {
width: 17%;
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
table th, td {
/* Comment out the following line if you do not want borders */
border: 1px #d3d3d3 solid;
/* This is the default font for all cells */
font-family: Calibri;
}
table tbody tr:hover td {
color: #000;
background: #efefef;
}
body{
width:100%;
margin-left: 0;
margin-right: 0;
background: #666;
}
.containerPage {
min-width: 210mm;
max-width: 210mm;
padding-left: 2mm;
padding-right: 2mm;
margin-left: auto;
margin-right: auto;
background: #FFF;
}
.containerMeeting {
margin-bottom: 5mm;
}
.cellTime {
padding-left: 3mm;
padding-right: 5mm;
font-size: 9pt;
font-weight: 700;
color: gray;
}
.cellContent {
border-right: none;
}
.cellPosition {
padding-right: 5px;
color: gray;
text-align: right;
border-left: none;
}
.cellPosition, .cellName {
font-size: 10pt;
font-weight: normal;
}
.tableAYFM {
margin-bottom: 2mm;
}
.textAYFM {
padding-left: 1mm;
padding-top: 1mm;
padding-bottom: 1mm;
color: #fff;
background-color: #c18626;
width: 90mm;
font-size: 10pt;
font-weight: 700;
}
.bulletAYFM {
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 1mm;
color: #c18626;
font-size: 14pt;
font-weight: normal;
}
.cellClass {
font-size: 8pt;
font-weight: 700;
vertical-align: bottom;
color: gray;
}
.textDuration {
padding-left: 1mm;
font-family: Calibri;
font-size: 9pt;
font-weight: normal;
}
.textTheme {
font-size: 11pt;
font-weight: normal;
}
#media print {
body{
background: #FFF;
}
.containerPage, .containerMeeting, .tableAYFM {
width: 99%;
min-width: 99%;
max-width: 99%;
padding-left: 0;
padding-right: 0;
margin-left:auto;
margin-right:auto;
}
}
<body>
<div class="containerPage">
<div class="containerMeeting">
<table class="tableAYFM">
<colgroup>
<col class="columnTime" />
<col class="columnTheme1Class" />
<col class="columnX" />
<col class="columnName" />
</colgroup>
<tr>
<td class="cellTime">19:49</td>
<td class="cellContent">
<span class="bulletAYFM">•</span> <span class="textTheme">Initial
Call</span> <span class="textDuration">(2 min. or less)
<span lang="en-gb">THIS IS EXTRA TEXT.<br />
I FORCE IT TO HAVE 3 LINES.<br />
HERE IS THE REST.</span></span>
</td>
<td class="cellPosition">
Student:<br />
Assistant:
</td>
<td class="cellName">
Name 1<br />
Name 2
</td>
</tr>
</table>
</div>
</div>
</body>
You can't align vertically using a floating element on the right : a floating element is out of the flow, so it cannot "see" the height of the element next to it.
However, you can use two inline-block elements and the CSS property vertical-align.
HTML
<td>
<div class="left">
<span class="bulletAYFM">•</span>
<span class="textTheme">Initial
Call</span>
<span class="textDuration">(2 min. or less)
<span lang="en-gb">
THIS IS EXTRA TEXT.<br />
I FORCE IT TO HAVE 3 LINES.<br />
HERE IS THE REST.
</span>
</span>
</div>
<div class="right">
Student:<br />
Assistant:
</div>
</td>
CSS
.left {
display: inline-block;
width: 89%;
vertical-align: middle;
}
.right {
display: inline-block;
width: 10%;
box-sizing: border-box;
vertical-align: middle;
color: gray;
padding-top: 1mm;
padding-bottom: 1mm;
padding-right: 2mm;
text-align: right;
font-size: 8pt;
font-weight: 700;
text-transform: none;
}
The inconvenient is you have to specify a width <= 100% on the left block (90% on the example). It's the only way I know to align vertically correctly (except flexbox I don't know how to use yet).
The big advantage is that it is a real vertical alignement : you can add as much text as you want on the left, it will still work.
See demo here based on your code
You can make your <tr>different:
<tr>
<td class="cellTime">19:49</td>
<td>
<span class="bulletAYFM">•</span> <span class="textTheme">Initial
Call</span> <span class="textDuration">(2 min. or less)
<span lang="en-gb">THIS IS EXTRA TEXT.<br />
I FORCE IT TO HAVE 3 LINES.<br />
HERE IS THE REST.</span></span>
</td>
<td valign="middle" style="width: 15%; text-align:right;">
Student:<br />
Assistant:
</td>
<td class="cellName">Name 1<br />
Name 2</td>
</tr>
However, is a weird way to make this task.
Is it possible to align text in a cell?
In my example I want to align hours and city centrally like this:
PLUNKER
#presentation {
background-color: #dedede;
padding-top: 25px;
padding-left: 50px;
padding-right: 50px;
}
#offers h1 {
text-transform: uppercase;
color: #666666;
}
#offers h1 em {
color: #4598d1;
font-style: normal;
}
.offers {
padding: 25px 50px;
width: 50%;
margin: auto;
}
.offers button {
background-color: #dddddd;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #868686;
border: #868686;
border-style: solid;
border-width: 1px;
}
.offers .right {
float: right;
width: 100px;
}
.offers table {
background-color: #DEDEDE;
text-align: left;
float: left;
}
.offers .tittle {
font-size: 18px;
color: #666666;
font-family: 'Arial Normal', 'Arial';
text-transform: uppercase;
}
.offers th {
font-family: 'Arial Normal', 'Arial';
font-weight: 400;
font-size: 11px;
white-space: nowrap;
}
.offers table th .fistClass {
font-family: 'Arial Gras', 'Arial';
font-weight: 700;
font-style: normal;
font-size: 12px;
color: #669900;
text-align: center;
}
.offers table .td {
background-color: #ffffff;
}
.offers .departureTime {
color: #35A6F4;
font-size: 18px;
font-weight: bold;
}
.offers .arrivalTime {
color: #35A6F4;
font-size: 11px;
}
.offers .originStation {
font-family: 'Arial Gras', 'Arial';
font-weight: bold;
font-style: normal;
font-size: 11px;
}
.offers .destinationStation {
font-family: 'Arial Gras', 'Arial';
font-style: normal;
font-size: 11px;
}
.offers .duration {
font-size: 11px;
color: #666666;
}
.offers .priceFirstClass {
color: #7ABB00;
text-align: right;
font-family: 'Arial Gras', 'Arial';
font-weight: bold;
font-size: 20px;
}
.offers .minPrice {
}
.offers .lastPlaces {
}
.offers .unavailable {
font-size: 12px;
color: #E4E4E4;
text-align: center;
}
.offers .foo {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: auto;
}
.offers p.espacement_important {
margin: 5px 0;
}
.offers span{
padding-left: 15px;
}
<div id="presentation">
<section>
<div class="offers">
<table border="0">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td>
<div>
<p>
<span class="departureTime">03h00</span>
<span>New-York</span>
</p>
<p>
<span class="arrivalTime">15h00</span>
<span>Bahamas</span>
</p>
<p class="duration"><span >8h00</span>
<span>2 correspond.</span>
<span>A380</span>
</p>
</div>
</td>
<td class="unavailable">indisponible</td>
<td><input type="radio" />
<label >10.00 €</label>
</td>
<td>
<label >50.00 €</label>
</td>
</tr>
</table>
</div>
</section>
</div>
Try below code.
HTML
<div id="presentation">
<section>
<div class="offers">
<table class="locationtable" width="100%;" cellpadding="0">
<tr>
<td width="50%"><span class="departureTime">03h00</span></td>
<td width="50%"><span>New-York</span></td>
</tr>
<tr>
<td class="duration">8h00</td>
<td><span>Bahamas</span></td>
</tr>
</table>
</div>
</section>
CSS
.locationtable{
width: 200px;
margin: 0 auto;
background: #eee;
}
table td{
padding: 5px 10px;
vertical-align: middle;
text-align: center;
}
.departureTime,
.duration{
color: blue;
}
JSFIDDLE DEMO
What you want to do, is to force the text on a unique line.
I can think now of two solutions to proceed so.
The first one, would be to give to the cell that contains your text a minimum width that would always allow the text to display on one line, but, what if a new longer station name is created forward ?
The second solution is to force the text on one line with a css property call "white-space", and, in a table cell it will automatically resize the "td" to fit your text :
.offers td:first-child p{
white-space:nowrap;
}