Push column partially into another 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

Push column partially into another column

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style type="text/css">

div.container {<!--   w  w w.  j a v a 2 s .  co m-->
   width: 80%;
   margin: 1em auto;
   background: #ccc
}

div.col {
   float: left;
   width: 40%;
   background: #ddd;
   padding: 1em 4.9%
}

div.pull1 {
   float: right;
   width: 100%;
   margin: -1em -67.5% 1em 5%;
   padding: 5%;
   position: relative;
   visibility: hidden
}

div.pull2 {
   float: left;
   width: 100%;
   margin: -1em 5% 1em -67.5%;
   padding: 5%;
   position: relative;
   background: #eee;
}

      </style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="col"> 
    <div class="pull1">
      Etiam orci augue, lacinia in feugiat et, dapibus sed libero. Pellentesque commodo placerat orci nec imperdiet. Aliquam erat volutpat. Pellentesque tincidunt aliquet orci et rutrum. Nullam convallis dui a est vestibulum dictum. Nam sollicitudin aliquam egestas. 
    </div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis in consectetur erat. Maecenas varius, nisl quis vehicula tristique, ipsum turpis porta erat, sodales rutrum felis nulla non lorem. Quisque sit amet fermentum nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus a elit et diam dapibus mattis. 
   </div> 
   <div class="col"> 
    <div class="pull2">
      Etiam orci augue, lacinia in feugiat et, dapibus sed libero. Pellentesque commodo placerat orci nec imperdiet. Aliquam erat volutpat. Pellentesque tincidunt aliquet orci et rutrum. Nullam convallis dui a est vestibulum dictum. Nam sollicitudin aliquam egestas. 
    </div> Mauris erat risus, sollicitudin sed luctus ut, laoreet sed nisi. Mauris auctor, turpis eget tempor accumsan, erat lorem ultricies sapien, congue molestie mi urna quis velit. Sed imperdiet sollicitudin magna vel bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum elit lacus, molestie a ultrices at, interdum in dui. Vestibulum eu nisi a sem congue rutrum et ac tortor. In sollicitudin, tellus bibendum rutrum tempus, justo nisl semper mi, et euismod ante diam nec diam. In eget leo et quam ultricies placerat. Pellentesque adipiscing semper elit vitae venenatis. Ut condimentum eleifend tortor, vitae mattis erat malesuada in. Donec eleifend ultricies tortor eu pulvinar. 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials