CODEWITHSUNDEEP
htmlcss
Melody Hajian
Melody Hajian

Reputation: 285

dividing the screen to 4 Quarters doesn't work

I am dividing my screen to 4 Quarters but it doesn't work with all screen resolutions.I need it to always be 4quarters even by changing the window size. here is the code:

body{
  height:800px; 
  }
 div{
  position:relative;
  border:1px solid red; 
  width:49.7%;
  height:49.7%;
  }
#Q1,#Q3{
 float:left;
  }
#Q2,#Q4{
 float:right;
 }
 </style>
 </head>
 <body>

<div id="Q1"> </div>
<div id="Q2"> </div>
<div id="Q3"> </div>
<div id="Q4"> </div>
</body>

Upvotes: 1

Views: 1070

Answers (2)

Hashem Qolami
Hashem Qolami

Reputation: 99534

The computed width of the boxes exceeds the total available space in lower screens. This is because the border of 1px around the elements.

You could give the div elements a box-sizing: border-box; declaration so that their width would be calculated including padding and borders.

Example Here

div {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

In addition, if you want to resize the height of the boxes with the respect to the height of the body, note to set height: 100% on body and html as well.

You have to specify the height of html to get height: 100% to work for the <body>. This because a percentage value of height property is relative to the height of box's containing block.

Updated Example Here

html, body {
  height: 100%; 
  padding : 0;
  margin  : 0; /* Remove the default 8px margin around the body */
}

Also note that UAs apply a default margin to the <body> by default. Make sure you have reset the user agent stylesheet.

Upvotes: 4

Kai Mattern
Kai Mattern

Reputation: 3085

Use this CSS to make the height 100% and quarter it:

body{
  height:100%; 
}

html {
  height: 100%;
}

div{
  position:relative;
  border:1px solid red; 
  width: 50%;
  height: 50%;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#Q1,#Q3{
  float:left;
}
#Q2,#Q4{
  float:right;
}

Upvotes: 3

Related Questions