Put Two headers next to each and other text vertical align - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

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

Description

Put Two headers next to each and other text vertical align

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">

h6 {<!--from  w w w .  j  av a 2 s.  c  o m-->
   display:inline-block;
   width: 510px;
   float: right;
   padding:0;
   margin:25px 0 10px 25px;
   font-size:24px;
   font-weight:400;
   text-transform:uppercase;
   color:rgb(230,230,230);
}
h2 {
   width: 110px;
   float: left;
   text-transform:uppercase;
   padding:0;
   margin:25px 0 10px 30px;
   font-size:13;
   font-weight:bold;
   color:#e6540c;
}
.txtBox1 {
   position: absolute;
   height: 140px;
   width: 100%;
   background:url(https://www.java2s.com/style/demo/Opera.png);
   bottom: 0;
}
.Box1 {
   float:left;
   width: 703px;
   height: 589px;
   overflow: hidden;
   position: relative;
   margin: 0px 0px 15px 0px;
   border-radius: 5px;
}


      </style> 
 </head> 
 <body> 
  <div class="Box1"> 
   <a href="#"> <img src="https://www.java2s.com/style/demo/Opera.png"> 
    <div class="txtBox1"> 
     <h2>2014 02 16</h2> 
     <h6> test test test test - <br> test test test test test est </h6> 
    </div> </a> 
  </div>  
 </body>
</html>

Related Tutorials