Divs position in metro style - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

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

Description

Divs position in metro style

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">
style type='text/css'>
   body {<!--  w  w  w.j  a  v  a  2 s .co m-->
   margin:0;
   padding:0;
}

.clear {
   clear:both;
}

#wrapper {
   margin:0 auto;
   width:1401px;
}

#block1 {
   width:647px;
   height:390px;
   float:left;
   background:Chartreuse;
   margin:6px;
}

#block3 {
   width:324px;
   height:191px;
   float:left;
}

#block4 {
   width:647px;
   height:191px;
   float:left;
   margin:6px;
}

.color1 {
   background:yellow ;
}

.color2 {
   background:blue ;
}

.color3 {
   background:pink ;
}

#header:hover,#block1:hover,#block2:hover,#block3:hover, #block4:hover {
   background:OrangeRed;
}

.block-x {
   margin:205px 6px 6px -329px;
}

.block-3 {
   margin:6px;
}
</style> 
 </head> 
 <body> 
  <div id="wrapper"> 
   <div id="block4" class="color1"> 
   </div> 
   <!--block-long--> 
   <div id="block3" class="color3 block-3"></div> 
   <!--block-short--> 
   <div id="block3" class="color3 block-3"></div> 
   <!--block-short--> 
   <div class="clear"></div> 
   <div id="block3" class="color3 block-3"></div> 
   <!--block-short--> 
   <div id="block3" class="color3 block-x"></div> 
   <!--block-short--> 
   <div id="block1"></div> 
   <!--block-big--> 
   <div id="block3" class="color3 block-3"></div> 
   <!--block-short--> 
   <div id="block3" class="color3 block-3"></div> 
   <!--block-short--> 
   <div class="clear"></div> 
   <div id="block4" class="color1"> 
   </div> 
   <!--block-long--> 
   <div id="block4" class="color2"> 
   </div> 
   <!--block-long--> 
   <div class="clear"></div> 
  </div> 
  <!--wrapper-->  
 </body>
</html>

Related Tutorials