mark up a tiled layout with CSS - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Layout

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

Description

mark up a tiled layout with CSS

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
 </head> <!--from  w ww  .  j ava 2s. c  o  m-->
 <body> 
  <div style="position:absolute; left:0; right:0; top:0; bottom:0"> 
   <div style="position:absolute; top:0; height:80px; left:0; width:42px; background:green">
     Lorem ips 
   </div> 
   <div style="position:absolute; top:0; height:80px; right:0; left:42px; background:red">
     Lorem ips 
   </div> 
   <div style="position:absolute; top:80px; bottom:0; left:0; width:42px; background:red">
     Lorem ips 
   </div> 
   <div style="position:absolute; top:80px; bottom:0; right:0; left:42px; background:green">
     Lorem ips 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials