Fixed positioned element with the same distance to another element in larger window - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Fixed Position

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

Description

Fixed positioned element with the same distance to another element in larger window

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">
body {<!--  w  w w  . j a  va2  s.  c  o m-->
   margin:0;
   padding:0;
   border:2px solid Chartreuse;
   min-height:2001px;
   min-width:100%;
}

.fixed
 {
   position:fixed;
   top:0;
   left:0;
   height:201px;
   width:calc(76% - 201px);
   background-color:yellow;
}

.right-element {
   width:26%;
   height:201px;
   background-color:blue;
   margin-left:76%;
}
</style> 
 </head> 
 <body> 
  <div class="fixed"></div> 
  <div class="right-element"></div>  
 </body>
</html>

Related Tutorials