Please try this,
<html>
<head>
<title>Header Template</title>
<style type="text/css">
div.header{
border-style:solid;
border-width:2px 0px 2px 0px;
border-color:#999999;
padding-top:3px;
padding-bottom:1px;
display:block;
width:100%;
}
p.header{
font-family:"Times New Roman", Times, serif;
font-size:20;
letter-spacing:4;
display:inline;
width:100%;
}
div.header2{
display : inline;
width : 100%;
}
p.header2{
font-family:"Times New Roman", Times, serif;
font-size:20;
letter-spacing:4;
display:inline;
width:100%;
}
.black{
color:black;
}
.grey{
color:#999999;
}
p.big{
font-size:26;
padding:0px 0px 0px 0px;
letter-spacing:0;
}
p.telephone{
font-size:15;
}
div.telephone{
right:0;
}
</style>
</head>
<body>
<div class="header">
<p class="header black big">T</p>
<p class="header black">HE </p>
<p class="header black big">N</p>
<p class="header black">AME </p>
<p class="header grey">| BOB JONES</p>
<div class="header2 telephone">
<p class="header2 telephone gray">| </p>
<p class="header2 telephone">1855-ANUMBER</p>
</div>
</div>
</body>
</html>
I add class div.header2 and p.header2
In html, you cannot use class header for div and p element inside class header for div element. So you must create another class header, like header2 for div and p element.
On class header in div element, give block value for attribute display. Because if you give inline value, the element will be treated like an inline element such as span, anchor etc., the width attribute will not expand like in block element.
