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 (<div>s) to be resized automatically (and relatively) if the browser window is resized.

I have not worked with CSS for a long time. I've no idea how to handle this.

Answer 1

Demo at http://jsfiddle.net/CRSVU/

html, body {   height: 100%;   padding: 0;   margin: 0; }  div {   width: 50%;   height: 50%;   float: left; }  #div1 {   background: #DDD; }  #div2 {   background: #AAA; }  #div3 {   background: #777; }  #div4 {   background: #444; }

<div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div>