Date in Upper Right corner of a div - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div

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

Description

Date in Upper Right corner of a div

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

body {<!--   w w  w . j a v a  2  s . c  om-->
   background-color: #FFFFFF;
   color: #000000;
   text-align: center;
}
.container {
   width: 80%;
   display: inline-block;
}
.post {
   border: 2px solid #000000;
   padding: 0px 4px 0px 4px;
   position:relative
}
.post p,h2 {
   margin: 0;
}
.post h2 {
   text-align: center;
   padding: 0 60px
}
.post p {
   text-align: left;
   text-indent: 40px;
   line-height: 1.8;
}
hr {visibility: hidden;}
.date {
   font-size: 12pt;
   font-style: italic;
   font-weight: normal;
   position:absolute;
   right: 4px
}
@media screen and (max-width: 600px){
   .container {width: 100%;}
   .post p {text-align: justify;text-indent: 0px;font-size: 14pt;}
}


      </style> 
 </head> 
 <body> 
  <div class="post" id="7"> 
   <span class="date">10/15/17</span> 
   <h2>Seventh Post blah blah blah</h2> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p> 
  </div>  
 </body>
</html>

Related Tutorials