CODEWITHSUNDEEP
css
Calaf
Calaf

Reputation: 10837

Four quadrants in CSS

With this fiddle https://jsfiddle.net/8kh5Lw9r/ I get, as expected, four quadrants.

four quadrants in CSS

HTML

<div id="one"><p>One</p></div>
<div id="two"><p>Two</p></div>
<div id="three"><p>Three</p></div>
<div id="four"><p>Four</p></div>

CSS

div {
    position: fixed;
    border: 1px dashed red;
}

#one {
    height: 40%;
    width: 35%;
}
#two {
    height: 40%;
    width: 65%;
}
#three {
    height: 60%;
    width: 35%;
}
#four {
    height: 60%;
    width: 65%;
}

But:

  1. Why do the four paragraphs bundle when the DIVs are fine?
  2. Is there a way to avoid duplication, by specifying the 40/60 and 35/65 divisions in one place?

Edit: I'd very much appreciate it if you point out errors in my understanding of how CSS works. An answer is nice, but telling me where I was wrong is much more helpful.

Upvotes: 0

Views: 2375

Answers (5)

aphextwix
aphextwix

Reputation: 1858

You could try this : 

 .wrapper {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
}

#one, #two, #three, #four {
  border: 1px dashed red;
  box-sizing: border-box;
  float: left;
}

#one {
    height: 40%;
    width: 35%;
}
#two {
    height: 40%;
    width: 65%;
}
#three {
    height: 60%;
    width: 35%;
}
#four {
    height: 60%;
    width: 65%;
}
<div class="wrapper">
  <div id="one"><p>One</p></div>
  <div id="two"><p>Two</p></div>
  <div id="three"><p>Three</p></div>
  <div id="four"><p>Four</p></div>
</div>

Upvotes: 1

redbmk
redbmk

Reputation: 4796

Your divs actually aren't fine. Changing the size and color of the borders might make it more clear, like in the following example.

div {
  position: fixed;
}
#one {
  border: 2px dashed blue;
  height: 40%;
  width: 35%;
}
#two {
  border: 1px solid red;
  height: 40%;
  width: 65%;
}
#three {
  border: 2px dashed green;
  height: 60%;
  width: 35%;
}
#four {
  border: 2px solid black;
  height: 60%;
  width: 65%;
}
<div id="one"><p>One</p></div>
<div id="two"><p>Two</p></div>
<div id="three"><p>Three</p></div>
<div id="four"><p>Four</p></div>

What's happening is they are all starting at position (0,0), but because they are all different sizes it makes a grid. Your percentages add up to 100%, but because they all have the same starting point, they are not actually taking up 100%. The largest one is 65% by 65%, therefore the entire grid is only 65% by 65%.

You can fix this by either removing the fixed size, or by setting the x and y coordinates if you do want the position to be fixed.

By using classes for the varying widths and heights you can avoid using ids.

div {
  position: fixed;
  border: 1px dashed red;
  box-sizing: border-box;
}
.top    { height: 40%; top:    0; }
.bottom { height: 60%; bottom: 0; }
.left   { width:  35%; left:   0; }
.right  { width:  65%; right:  0; }
<div class="top left"><p>One</p></div>
<div class="top right"><p>Two</p></div>
<div class="bottom left"><p>Three</p></div>
<div class="bottom right"><p>Four</p></div>

The box-sizing: border-box isn't really necessary, it just lets you combine the border into the size of the div. Without it, you will see two borders where they intersect and the divs may go off the end of the page a bit.

Upvotes: 3

CodeWeis
CodeWeis

Reputation: 856

i think this can work

body{
  margin:0;
}
div {
    position: fixed;
    border: 1px dashed red;
}
#box{
  height: 60%;
    width: 65%;
}
#one {
    height: 40%;
    width: 35%;
}
#two {
    height: 40%;
    left: 35%;
    width: 30%;
}
#three {
    top:40%;
    height: 20%;
    width: 35%;
}
#four {
   top:40%;
   left: 35%;
    height: 20%;
    width: 30%;
}
<div id="box">
<div id="one"><p>One</p></div>
<div id="two"><p>Two</p></div>
<div id="three"><p>Three</p></div>
<div id="four"><p>Four</p></div>
</div>

Upvotes: 0

Konstantin
Konstantin

Reputation: 39

One way to solve those problems:

body {
  height: 300px;
}

div {
    border: 1px dashed red;
    float: left;
}

#one, #two {
    height: 40%;
    border-bottom: none
}

#three, #four {
  height: 20%;
}

#one, #three {
    width: 35%;
}

#two, #four {
  width: 30%;
  border-left: none;
}
<div id="one"><p>One</p></div>
<div id="two"><p>Two</p></div>
<div id="three"><p>Three</p></div>
<div id="four"><p>Four</p></div>

Upvotes: 0

Johannes
Johannes

Reputation: 67778

1.) Because you set position: fixed; for all four DIVs. This fixes them in the upper left corner (in your case) of the viewport/window. Just erase that.

2.) Yes, use classes instead of IDs. These you can apply to more than one element, like

.x {
  height: 40%;
  width: 65%;
}

<div class="x">...</div>

Upvotes: 1

Related Questions