w3 Tutorial, Web Tutorial
<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:inline;
width:100%;
}
p.header{
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="header telephone">
<p class="header telephone gray">| </p>
<p class="header telephone">1855-ANUMBER</p>
</div>
</div>
</body>
</html>
The page will look like this [Click here]
<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;
float : right;
margin : 5px 0;
}
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>
The page will look like this [Click here]
Gerbiler want to force the phone number to the right. See the div element with atribut class named "header2 telephone". It mean 2 selector will affected the div element. So just update the css div.header2 look like this:
div.header2{
display : inline;
float : right;
margin : 5px 0;
}
div element will force to the right.
Download