Menu block attached to the side of the center aligned content block - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu

Description

Menu block attached to the side of the center aligned content block

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,<!--from  www  . j  a  v a  2s .  c o  m-->
body {
   margin:0;
   padding:0;
}

#header {
   margin:11px;
   background-color:Chartreuse;
   height:51px;
}

#content {
   position:relative;
   display:block;
   width:301px;
   margin:0 auto;
   height:401px;
   background-color:yellow;
}

#menu {
   background-color:blue;
   position:absolute;
   right:311px;
   width:100px;
   height:201px;
}

#footer {
   background-color:pink;
   margin:11px;
   height:51px;
}
</style> 
 </head> 
 <body> 
  <div id="header"></div> 
  <div id="content"> 
   <div id="menu"></div> 
  </div> 
  <div id="footer"></div>  
 </body>
</html>

Related Tutorials