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 (

s) to be resized automatically (an

Solution 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;
}

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

Solution 2:

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

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 }

<divid="NW"></div><divid="NE"></div><divid="SE"></div><divid="SW"></div>

JSFiddle demo

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.

Solution 3:

Some good answers here but just adding an approach that won't be affected by borders and padding:

html, body { width: 100%; height: 100%; padding: 0; margin: 0 }

div { position: absolute; padding: 1em; border: 1px solid #000 }

#nw { background: #f09; top: 0;   left: 0;   right: 50%; bottom: 50% }
#ne { background: #f90; top: 0;   left: 50%; right: 0;   bottom: 50% }
#sw { background: #009; top: 50%; left: 0;   right: 50%; bottom: 0}
#se { background: #090; top: 50%; left: 50%; right: 0;   bottom: 0}

<divid="nw">test</div><divid="ne">test</div><divid="sw">test</div><divid="se">test</div>

Solution 4:

I did not want to add style to <body> tag and <html> tag.

.quodrant{
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.qtop,
.qbottom{
    width: 100%;
    height: 50vh;
}

.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
    display: inline;
    float: left;
    width: 50%;
    height: 100%;
}

.quodrant1{
    top: 0;
    left: 50vh;
    background-color: red;
}

.quodrant2{
    top: 0;
    left: 0;
    background-color: yellow;
}

.quodrant3{
    top: 50vw;
    left: 0;
    background-color: blue;
}

.quodrant4{ 
    top: 50vw;
    left: 50vh;
    background-color: green;
}

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linktype="text/css"rel="stylesheet"href="main.css" /></head><body><divclass='quodrant'><divclass='qtop'><divclass='quodrant1'></div><divclass='quodrant2'></div></div><divclass='qbottom'><divclass='quodrant3'></div><divclass='quodrant4'></div></div></div><scripttype="text/javascript"src="main.js"></script></body></html>

Or making it looks nicer.

.quodrant{
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.qtop,
.qbottom{
    width: 96%;
    height: 46vh;
}

.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
    display: inline;
    float: left;
    width: 46%;
    height: 96%;
    border-radius: 30px;
    margin: 2%;
}

.quodrant1{
    background-color: #948be5;
}

.quodrant2{
    background-color: #22e235;
}

.quodrant3{
    background-color: #086e75;
}

.quodrant4{ 
    background-color: #7cf5f9;
}

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><linktype="text/css"rel="stylesheet"href="main.css" /></head><body><divclass='quodrant'><divclass='qtop'><divclass='quodrant1'></div><divclass='quodrant2'></div></div><divclass='qbottom'><divclass='quodrant3'></div><divclass='quodrant4'></div></div></div><scripttype="text/javascript"src="main.js"></script></body></html>

Solution 5:

Similar to other posts, but with an important distinction to make this work inside a div. The simpler answers aren't very copy-paste-able because they directly modify div or draw over the entire page.

The key here is that the containing div dividedbox has relative positioning, allowing it to sit nicely in your document with the other elements, while the quarters within have absolute positioning, giving you vertical/horizontal control inside the containing div.

As a bonus, text is responsively centered in the quarters.

HTML:

<head><metacharset="utf-8"><title>Box model</title><linkrel="stylesheet"href="style.css"></head><body><h1id="title">Title Bar</h1><divid="dividedbox"><divclass="quarter"id="NW"><p>NW</p></div><divclass="quarter"id="NE"><p>NE</p></div><divclass="quarter"id="SE"><p>SE</p></div>
    <divclass="quarter"id="SW"><p>SW</p></div></div></body></html>

CSS:

html, body { height:95%;} /* Important to make sure your divs have room to grow in the document */#title { background: lightgreen}
#dividedbox { position: relative; width:100%; height:95%}   /* for div growth */.quarter {position: absolute; width:50%; height:50%;  /* gives quarters their size */display: flex; justify-content: center; align-items: center;} /* centers text */#NW { top:0;    left:0;     background:orange;     }
#NE { top:0;    left:50%;   background:lightblue;  }
#SW { top:50%;  left:0;     background:green;      }
#SE { top:50%;  left:50%;   background:red;        }

http://jsfiddle.net/og0j2d3v/

Html5 Academy