Html layout for smaller screen - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Layout

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

Description

Html layout for smaller screen

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">
#container, html, body {
   width:401px;
   height:601px;
   margin:0;
   padding:0;
   position:relative;
   text-align:center;
}

#i2 {<!--from w  w w.  j a  va 2s  .  com-->
   position:absolute;
   width:100%;
   height:51px;
   background-color:Chartreuse;
}

#i3 {
   border-radius:100px;
   margin:0 auto;
   position:absolute;
   top:0;
   left:0;
   right:0;
   width:100px;
   height:100px;
   background-color:yellow;
}

#i1 {
   height:301px;
   background-color:blue;
}

#container {
   background-color:pink;
}

#foreground {
   position:absolute;
   top:121px;
   width:100%;
}

#i5 {
   left:0;
   right:0;
   width:91%;
   height:401px;
   margin:0 auto;
   background-color:OrangeRed;
}

#i1, #i2, #i4 {
   text-align:left;
}

#i3 {
   text-align:center;
}

#i6 {
   height:21px;
   background-color:grey;
}

#i7 {
   height:121px;
   background-color:BlueViolet;
}
</style> 
 </head> 
 <body> 
  <div id="container"> 
   <div id="i1"> 
    <div id="i2">
      Lor 
     <div id="i3">
       Lor 
     </div> 
    </div>Lor 
   </div> 
   <div id="foreground"> 
    <!-- div id="i4">4</div --> 
    <div id="i5">
      Lor 
    </div> 
    <div id="i6">
      Lor 
    </div> 
    <div id="i7">
      Lor 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials