make the right column fixed, with fixed header and centered content - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Column Layout

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

Description

make the right column fixed, with fixed header and centered content

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">

* { box-sizing: border-box; }
html, body { height: 100%; }
body, header, section, div {
   margin: 0;
   padding: 0;
}
header {<!--from   w w  w . j a  va 2s  .  c  o  m-->
   padding: 50px;
   background: blue;
}
section, aside {
}
section {
   width: 75%;
   height: 95%; 
   height: calc(100% - 50px);
   float: left;
   background: orange;
   padding: 1em;
   overflow: auto;
}
section > article {
   margin: 1em 0;
   padding: 100px;
   border: 1px solid black;
   background: white;
}
aside {
   height: 100%;
   width: 25%;
   position: fixed;
   top: 0;
   right: 0;
   background: red;
   z-index: -1;
}


      </style> 
 </head> 
 <body> 
  <header></header> 
  <section> 
   <article></article> 
   <article></article> 
   <article></article> 
   <article></article> 
  </section> 
  <aside></aside>  
 </body>
</html>

Related Tutorials