Make box go below the text like in the image - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text

Description

Make box go below the text like in the image

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor </title> 
  <style>
.text_box_holder {<!--from  w w w .  j a v  a  2 s  . com-->
   position:relative;
}

.text_box_holder h1 {
   text-align:right;
   padding-right:51%;
   color:Chartreuse;
   background:inherit;
   -webkit-background-clip:text;
   text-align:left;
   position:absolute;
   top:-23px;
   margin-top:19px;
   margin-bottom:19px;
}

.learn_more_in_box {
   color:yellow;
   text-align:right;
   -webkit-background-clip:text;
   text-align:left;
   position:absolute;
   top:5px;
}

.yellow_box {
   position:absolute;
   border:8px solid blue;
   width:41%;
   height:301px;
   margin-left:46px;
   z-index:3;
}

.main-text-wrapper {
   background-color:pink;
   width:41%;
   height:111px;
   position:absolute;
   top:66px;
   z-index:10000;
}

.link-text-wrapper {
   position:absolute;
   background-color:OrangeRed;
   top:196px;
   width:41%;
   height:31px;
   z-index:10000;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="text_box_holder"> 
   <div class="yellow_box"></div> 
   <div class="main-text-wrapper"> 
    <h1>Lorem ipsu<br>Lorem ipsu<br>Lorem ipsum </h1> 
   </div> 
   <div class="link-text-wrapper"> 
    <a href="" class="learn_more_in_box">Lorem ipsu</a> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials