How to split page into 4 equal parts?

Question

I want to divide my page into four equal parts, each of same height and width (50-50%).

I don\'t want to use JavaScript. I want blocks (

Answer 1

If you want to have control over where they are placed separate from source code order:

Demo: http://jsfiddle.net/NmL2W/

​

html, body { height:100%; margin:0; padding:0 }
div { position:fixed; width:50%; height:50% }
#NW { top:0;   left:0;   background:orange  }
#NE { top:0;   left:50%; background:blue    }
#SW { top:50%; left:0;   background:green   }
#SE { top:50%; left:50%; background:red     }    ​

Note: if you want padding on your regions, you'll need to set the box-sizing to border-box:

div {
  /* ... */
  padding:1em;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

…otherwise your "50%" width and height become "50% + 2em", which will lead to visual overlaps.