We have an example of some HTML code and CSS layouts code below. The purpose of this is to show how to work with CSS to get the layout you want. The CSS classes of particular interest are row and column. row::after is an interesting piece of CSS that is necessary to finish off the row and start on a new block.
The logo (a graphic 144px by 56px) and the upper-right corner section is a row with three columns. The columns float left. It looks like two columns but the middle column is just used as a spacer. After the row we clear both. Below is a screenshot of the HTML & CSS results in the Chrome browser.
Below is all of the code that produces the above, except for the two graphic files at the top that are required: the logo and the lock.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/* this is a comment in the style */
.container {
margin: auto;
border-radius: 10px;
border: 3px solid rgb(198,195,198);
padding: 20px;
width: 620px; /* width: 620px; can be changed */
box-shadow: 0px 0px 1px 1px rgb(220,220,220)
}
.column {
float: left;
}
.column.main {
width: 70%;
}
.column.spacer {
width: 1%;
}
.column.side {
width: 29%;
}
.column.ourmission {
width: 29%;
}
.column.spacermissionabout {
width: 6%
}
.column.aboutus {
width: 29%;
}
.column.questions {
width: 30%;
}
.mainmessagestyle {
padding: 5px;
border-width: 3px;
border-style: solid;
border-color: rgb(234, 234, 234);
border-radius: 12px;
background-color: rgb(245,245,245);
background-image: linear-gradient(rgb(234,234,234), white, white, white, white, white, white); /* Standard syntax (must be last) */
/* NOTE: Internet Explorer 9 and earlier versions do not support gradients. */
}
.sideformatting { /* Quick Links */
padding: 5px;
border: 3px solid rgb(234, 234, 234); /* width style color */
border-radius: 7px;
background-color: rgb(247, 243, 247);
}
.row::after {
content: ""; /* We need this line here! */
display: table; /* Let the element behave like a table element */
clear: both; /* We need this line here! */
}
.footstyleregular {
padding: 0px;
font-size: 10px;
line-height: 12px;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: rgb(100, 100, 100);
}
.footstylebold {
padding: 0px; /* 0 in original */
font-weight: bold;
font-size: 10px;
margin: 0;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: rgb(50,50,50); /* #666666 is rgb(102,102,102) */
}
</style>
</head>
<body style="background-color:rgb(228,228,228)">
<div class="container" style="background-color:white">
<div class="row">
<div class="column main">
<div style="margin-left:2px;margin-top:8px" height="87" valign="middle"><img src="logo144x56.png"></div>
</div>
<div class="column spacer">
<!-- do we need these PNGs if we set spacer to 1% ? -->
<img align="left" style="float:left" src="1x1transparent.png"> <!-- png-pixel dot com -->
<img align="left" style="float:left" src="1x1transparent.png">
<img align="left" style="float:left" src="1x1transparent.png">
<img align="left" style="float:left" src="1x1transparent.png">
</div>
<div class="column side">
<table align="left" width="182" border="0" style="float:left;font-family:Arial,Helvetica,sans-serif;padding:0 7px 5px 0;color:#fff;margin-top:10px;min-width:140px">
<tbody>
<tr>
<th align="left" width="176" style="color:#000;font-size:11px;padding-left:10px">Upper Right Corner
<img src="lock.gif" width="15" height="15" align="middle">
</th>
</tr>
<tr>
<td align="left" valign="top" style="font-size:11px;margin:0px;padding-top:5px;padding-left:12px;color:#000;background-color:rgb(247,243,247)">Name: FIRSTNAME LASTNAME
<br>Email firstname.lastname@domain.com
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p> </p>
<div class="row">
<div class="column main"> <!-- todo: add a border here -->
<div class="mainmessagestyle">
<h1 style="font-size:18px;margin:0px;padding:0px;font-family:Arial,Helvetica,sans-serif;color:#003399;font-weight:normal">Title</h1>
<br>
<p style="font-size:12px;margin:0px;padding:0px;line-height:18px;font-family:Arial,Helvetica,sans-serif">DEAR FIRSTNAME LASTNAME</p>
<br>How are you? We need some font styling here. We might use Arial <br>
</div>
</div>
<div class="column spacer">
<img align="left" style="float:left" src="1x1transparent.png"> <!-- Source: png-pixel.com -->
<img align="left" style="float:left" src="1x1transparent.png">
</div>
<div class="column side">
<div class="sideformatting">
<span style="font-weight:bold;font-size:12px;margin-left:0;font-family:Arial,Helvetica,sans-serif;padding:0;color:#0035ad">Links
</span><br>
<span style="font-size:12px;font-family:Arial,Helvetica,sans-serif"> <a href="https://somewebsite.com">link 1..</a>
</span><br>
<span style="font-size:12px;font-family:Arial,Helvetica,sans-serif"> <a href="https://anotherwebsite.com">link 2..</a>
</span><br>
</div>
</div>
</div>
<div class="row">
<br>
<hr>
<div class="column ourmission">
<h2 style="font-size:18px;margin:0px;padding:0px;font-family:Arial,Helvetica,sans-serif;color:#003399;font-weight:bold">Title2</h2>
<p style="font-size:12px;line-height:18px;font-family:Arial,Helvetica,sans-serif">text2.
</p>
</div>
<div class="column spacermissionabout">
<img align="left" style="float:left" src="1x1transparent.png"> <!-- png-pixel dot com -->
</div>
<div class="column aboutus">
<h2 style="font-size:18px;margin:0px;padding:0px;font-family:Arial,Helvetica,sans-serif;color:#003399;font-weight:bold">Title3</h2>
<p style="font-size:12px;line-height:18px;font-family:Arial,Helvetica,sans-serif">text3.
</p>
</div>
<div class="column spacermissionabout">
<img align="left" style="float:left" src="1x1transparent.png"> <!-- png-pixel dot com -->
</div>
<div class="column questions">
<h2 style="font-size:18px;margin:0px;padding:0px;font-family:Arial,Helvetica,sans-serif;color:#003399;font-weight:bold">Title4</h2>
<p style="font-size:12px;line-height:18px;font-family:Arial,Helvetica,sans-serif">text4.
</p>
</div>
</div>
<hr>
<div>
<br>
<h2 class="footstylebold">TEXT5</h2>
<span class="footstyleregular">rgb 100 100 100, 10px
</span>
<br>
<h2 class="footstylebold">TEXT6</h2>
<span class="footstyleregular">text6
</span>
<br><br>
<span class="footstyleregular">Copyright 2019 Company Inc. ALL RIGHTS RESERVED.
</span><br>
</div>
</div> <!-- container -->
</body>
</html>
Gmail
If you want to be able to send emails with Gmail using the above formatting, you will need to convert the above code from using styles listed in the style tag to inline styles. Apparently, Gmail requires inline styles, but that is not hard to do, it just takes a bit of time.
Container
Starting with the .container class above, we can refactor this code and move all of those styles to inline styles. What would the inline style code look like? Each style needs to be separated with a semicolon, as shown below.
<div style="margin:auto; background-color:white; border-radius: 10px; border: 3px solid rgb(198,195,198); padding: 20px; width: 620px; box-shadow: 0px 0px 1px 1px rgb(220,220,220)">
Transparent Graphic
You can get a transparent 1 x 1 pixel graphic at png-pixel.com. You can pick one of the presets. You can set the color to FFFFFF and the opacity to 0 to get a 1 x 1 transparent graphic to use as a spacer. Click the download button, or copy the HTML code to actually embed it right into the HTML source code.
Embedding Graphics
Instead of using a link to display your graphics in an HTML document, you can embed them. We have an article on how to do this at Embedding Images with Data URIs.