Create Fixed Size Header and float Contact Info to the Right - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Create Fixed Size Header and float Contact Info to the Right

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#header {<!-- w  w w . ja  v a2  s .  co m-->
   width: 960px;
   background-color: #CCC;
   margin: 40px auto 0px auto;
   padding: 10px 10px 10px 10px;
   border: 1px solid #000;
   border-top-right-radius: 25px;
   border-top-left-radius: 25px;
}
h1 {
   width: 400px;
   display: inline-block;
}
.contact {
   text-align: right;
   float: right;
   width: 500px;
}


      </style> 
 </head> 
 <body> 
  <div id="header"> 
   <h1>Test Inc.</h1> 
   <p class="contact"> Address Main Street <br> Service 1, Service 2, Service 3, Service 4 and Service 5 </p> 
   <p class="contact">(555) 555-5555</p> 
   <p class="contact"> 1234 Example Street <br> Anytown, CA 55555 </p> 
  </div>  
 </body>
</html>

Related Tutorials