Position fixed elements to stick the edges of their sibling - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Fixed Position

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

Description

Position fixed elements to stick the edges of their sibling

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">
html, body {
   padding:0;
   margin:0;
}

.container {<!--from www  . ja  va2s  . co  m-->
   height:501px;
   width:71%;
   background:green;
   margin:0 auto;
}

.left-img,
.right-img {
   position:fixed;
   background:blue;
   top:51%;
   width:13%;
}

.left-img {
   left:4%;
}

.right-img {
   right:4%;
}
</style> 
 </head> 
 <body> 
  <div class="left-img">
    Lorem ipsum 
  </div> 
  <div class="container"> 
  </div> 
  <div class="right-img">
    Lorem ipsum 
  </div>  
 </body>
</html>

Related Tutorials