Problem with positioning more fixed elements - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Fixed Position

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

Description

Problem with positioning more fixed elements

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum dolor sit </title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#header {<!--  ww w .jav a  2s .  c o m-->
   position:fixed;
   left:0px;
   right:0px;
   top:0px;
   background-color:Chartreuse;
   padding:11px 0;
   z-index:11;
}

#box1 {
   position:fixed;
   background-color:yellow;
   height:11px;
   left:0px;
   right:0px;
   top:11px;
   padding:11px 0;
}

#left {
   position:fixed;
   background-color:blue;
   left:0px;
   top:41px;
}

#content {
   position:absolute;
   top:41px;
   padding:2em 0 3em;
}

#footer {
   position:fixed;
   background-color:pink;
   bottom:0px;
   left:0px;
   right:0px;
   padding:11px 0;
}
</style> 
 </head> 
 <body> 
  <div id="header"> 
   <p>Lorem ipsum dol</p> 
  </div> 
  <div id="box1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. M 
  </div> 
  <div id="left">
    Lorem ipsum do 
  </div> 
  <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus at neque. Phasellus sed quam pharetra, tincidunt tortor in, pharetra nisl. Maecenas aliquam luctus mauris, vit 
  </div> 
  <div id="footer">
    Lorem 
  </div>  
 </body>
</html>

Related Tutorials