Div positioning: absolute, relative for two images, one header and text aligned left and right - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Relative Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Relative Position

Description

Div positioning: absolute, relative for two images, one header and text aligned left and 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">
.content {<!--from  www. j ava  2s  . com-->
   width:501px;
   background:Chartreuse;
   margin:auto;
}

.wrapper {
   max-width:351px;
   position:relative;
   background:yellow;
   margin:auto;
}

.slider {
   margin:auto;
   left:0;
   right:0;
   max-width:100%;
   position:relative;
   padding-bottom:63.858%;
}

.slide {
   max-width:401px;
   margin:auto;
   position:absolute;
   opacity:0.6;
}

.text {
   max-width:100%;
   position:relative;
   background:blue;
   opacity:0.6;
}

.text_left {
   max-width:51%;
   background:pink;
   float:left;
   text-align:left;
}

.text_right {
   max-width:51%;
   background:OrangeRed;
   float:right;
   text-align:right;
}
</style> 
 </head> 
 <body> 
  <div class="content">
    Lorem ips 
   <div class="wrapper">
     Lorem ips 
    <div class="slider"> 
     <img src="https://www.java2s.com/style/demo/Google-Chrome.png" class="slide" alt="slide1"> 
     <img src="https://www.java2s.com/style/demo/Firefox.png" class="slide" alt="slide2"> 
     <img src="https://www.java2s.com/style/demo/Opera.png" class="slide" alt="slide3"> 
    </div> 
    <!-- text should go underneath the image --> 
    <div class="text"> 
     <div class="text_left">
       Lorem ipsum 
     </div> 
     <div class="text_right">
       Lorem ipsum 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials