Right-align text into a column - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Column Layout

Description

Right-align text into a column

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

.parent{<!--from ww  w .j  a v  a 2  s.  c  o  m-->
   width:100%;
   display:block;
   background:red;
   height:100vh;
}
.child{
   width:700px;
   position:relative;
   display:block;
   background:aliceblue;
   height:100vh;
   margin:0 auto;
}
h1{
   text-align:left;
}
p{
   text-align: justify;
   width: 200px;
   position: absolute;
   right: 0;
}


      </style> 
 </head> 
 <body> 
  <div class="parent"> 
   <div class="child"> 
    <h1>Your Title</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus sem felis, ut egestas augue tincidunt at. Praesent sagittis nisl quis suscipit pretium. Fusce iaculis ornare tellus non mattis. Aenean blandit lacus a euismod feugiat. Aenean scelerisque ligula et rhoncus volutpat. Mauris at pretium dui. Nullam ipsum neque, malesuada vitae venenatis facilisis, pulvinar sed tortor. Phasellus aliquam accumsan suscipit. Suspendisse viverra sit amet sapien eu bibendum. </p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials