CODEWITHSUNDEEP
htmlcss
Santosh Kumar
Santosh Kumar

Reputation: 27875

How to split page into 4 equal parts?

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.

Upvotes: 35

Views: 141914

Answers (7)

Shaheer Arain
Shaheer Arain

Reputation: 1

If you want to divide Page || Div to 4 equal parts you can use this below approach.

.parent_div {
  display: flex;
}

.child_div {
  flex: 1;
  height: 100px;
}

.child_div:nth-child(odd) {
  background: #eee;
}

.child_div:nth-child(even) {
  background: #ddd;
}
<div class="parent_div">
  <div class="child_div"></div>
  <div class="child_div"></div>
  <div class="child_div"></div>
  <div class="child_div"></div>
</div>

If you have a basic flex-box knowledge you can do it easily and it will be responsive. You can do it vertically and horizontally as well.

Upvotes: -1

robC
robC

Reputation: 2737

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}
<div id="nw">test</div>
<div id="ne">test</div>
<div id="sw">test</div>
<div id="se">test</div>

Upvotes: 5

Phrogz
Phrogz

Reputation: 303146

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 }
<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>
<div id="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.

Upvotes: 10

thatuxguy
thatuxguy

Reputation: 2528

try this... obviously you need to set each div to 25%. You then will need to add your content as needed :) Hope that helps.

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#top_div {
  height: 25%;
  width: 100%;
  background-color: #009900;
  margin: auto;
  text-align: center;
}

#mid1_div {
  height: 25%;
  width: 100%;
  background-color: #990000;
  margin: auto;
  text-align: center;
  color: #FFFFFF;
}

#mid2_div {
  height: 25%;
  width: 100%;
  background-color: #000000;
  margin: auto;
  text-align: center;
  color: #FFFFFF;
}

#bottom_div {
  height: 25%;
  width: 100%;
  background-color: #990000;
  margin: auto;
  text-align: center;
  color: #FFFFFF;
}
<div id="top_div">Top- height is 25% of window height</div>
<div id="mid1_div">Middle 1 - height is 25% of window height</div>
<div id="mid2_div">Middle 2 - height is 25% of window height</div>
<div id="bottom_div">Bottom - height is 25% of window height</div>

Upvotes: 0

user527892
user527892

Reputation:

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>

Upvotes: 48

Weilory
Weilory

Reputation: 3101

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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>

<div class='quodrant'>
    <div class='qtop'>
        <div class='quodrant1'></div>
        <div class='quodrant2'></div>
    </div>
    <div class='qbottom'>
        <div class='quodrant3'></div>
        <div class='quodrant4'></div>
    </div>
</div>

<script type="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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>

<div class='quodrant'>
    <div class='qtop'>
        <div class='quodrant1'></div>
        <div class='quodrant2'></div>
    </div>
    <div class='qbottom'>
        <div class='quodrant3'></div>
        <div class='quodrant4'></div>
    </div>
</div>

<script type="text/javascript" src="main.js"></script>
</body>
</html>

Upvotes: 2

Swordopolis
Swordopolis

Reputation: 337

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>
  <meta charset="utf-8">
  <title>Box model</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1 id="title">Title Bar</h1>
  <div id="dividedbox">
    <div class="quarter" id="NW">
      <p>NW</p>
    </div>
    <div class="quarter" id="NE">
      <p>NE</p>
    </div>
    <div class="quarter" id="SE">
      <p>SE</p>
    </div>​
    <div class="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/

Upvotes: 0

Related Questions