Position second generated Div after third Div - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

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

Description

Position second generated Div after third Div

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum do</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
html, body {
   margin:0;
   padding:0;
}

#wrapper {<!--  w  w  w.  j av  a 2  s  . c o m-->
   width:701px;
   margin:0 auto;
   background:Chartreuse;
   position:relative;
}

#two {
   position:absolute;
   bottom:0;
   height:2px;
   width:100%;
}

#one, #two>div {
   background:yellow;
   color:blue;
}

p {
   line-height:4;
}
</style> 
 </head> 
 <body> 
  <div id="wrapper"> 
   <div id="one">
     Lorem ipsum dolor sit a 
   </div> 
   <div id="two"> 
    <div>
      Lorem ipsum dolor sit amet, consectetur 
     <br>Lorem ipsum do 
    </div> 
   </div> 
   <div id="three"> 
    <h1>Lorem ipsum </h1> 
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing eli</h3> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat</p> 
    <p> </p> 
    <p>Lorem ipsum dolor sit amet, co</p> 
    <p>Lorem ipsum dolor sit amet, c</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed</p> 
    <h2>Lorem ipsum do</h2> 
    <p> <strong>Lorem ipsum dolor sit amet, consectet</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> 
   </div> 
  </div> 
  <!-- wrapper -->  
 </body>
</html>

Related Tutorials