Use `position` and other properties to position web page - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

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

Description

Use `position` and other properties to position web page

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">
div#banner_container {
   position:relative;
   width:100%;
   height:76px;
   margin:2%;
   background-color:Chartreuse;
}

div#menu_container {
   position:relative;
   width:19%;
   margin:2%;
   height:351px;
   background-color:yellow;
   float:left;
}

div#content_container {
   position:relative;
   width:80%;
   height:501px;
   margin-left:2%;
   margin-top:2%;
   float:left;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box;
   background-color:blue;
}
</style> <!--   w  ww. ja v  a2 s.c  o m-->
 </head> 
 <body> 
  <div id="banner_container">
    Lorem ipsum dolor 
  </div> 
  <div id="menu_container">
    Lorem ipsum dolo 
  </div> 
  <div id="content_container">
    Lorem ipsum dolor s 
  </div>  
 </body>
</html>

Related Tutorials