Exploring the Four Quadrants of CSS

Question

Exploring the Four Quadrants of CSS

When I use this fiddle https://jsfiddle.net/8kh5Lw9r/, I am getting the expected four quadrants on the screen.

https://i.sstatic.net/O5Q6D.png

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

However, I am facing the following issues:

Why do the four paragraphs stack on top of each other even though the DIVs are properly configured?
Is there a way to prevent redundancy by defining the 40/60 and 35/65 divisions in a single location?

Edit: I would greatly appreciate it if you could identify any misconceptions I have about how CSS functions. Providing a solution is helpful, but correcting my misunderstandings would be even more beneficial.

css

Answer 1

Answer №1

Your div elements may not be displaying correctly. Adjusting the size and color of the borders could enhance the clarity, as demonstrated in the example below.

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>

The issue lies in all elements starting at position (0,0) and forming a grid due to their varying sizes. Although the percentages sum up to 100%, the grid size remains at 65% by 65% as the largest element is 65% by 65%. To address this, consider removing fixed sizes or setting x and y coordinates for a fixed position.

To streamline the code and prevent using IDs, utilize classes for different widths and heights.

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 property can be used to incorporate the border into the size of the div, eliminating overlapping borders and potential overflow of elements beyond the page boundaries.

Answer 2

Your div elements may not be displaying correctly. Adjusting the size and color of the borders could enhance the clarity, as demonstrated in the example below.

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>

The issue lies in all elements starting at position (0,0) and forming a grid due to their varying sizes. Although the percentages sum up to 100%, the grid size remains at 65% by 65% as the largest element is 65% by 65%. To address this, consider removing fixed sizes or setting x and y coordinates for a fixed position.

To streamline the code and prevent using IDs, utilize classes for different widths and heights.

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 property can be used to incorporate the border into the size of the div, eliminating overlapping borders and potential overflow of elements beyond the page boundaries.

Answer 3

Answer №2

1.) To prevent the fixed positioning of all four DIVs, simply remove the position: fixed; style from your CSS for those elements.

2.) It is recommended to use classes over IDs as they can be applied to multiple elements. For example:

.custom-style {
  height: 40%;
  width: 65%;
}

<div class="custom-style">...</div>

Answer 4

1.) To prevent the fixed positioning of all four DIVs, simply remove the position: fixed; style from your CSS for those elements.

2.) It is recommended to use classes over IDs as they can be applied to multiple elements. For example:

.custom-style {
  height: 40%;
  width: 65%;
}

<div class="custom-style">...</div>

Answer 5

Answer №3

If you're looking for a solution, you might want to consider the following approach:

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

#box1, #box2, #box3, #box4 {
  border: 1px dashed red;
  box-sizing: border-box;
  float: left;
}

#box1 {
    height: 40%;
    width: 35%;
}
#box2 {
    height: 40%;
    width: 65%;
}
#box3 {
    height: 60%;
    width: 35%;
}
#box4 {
    height: 60%;
    width: 65%;
}

<div class="container">
  <div id="box1"><p>One</p></div>
  <div id="box2"><p>Two</p></div>
  <div id="box3"><p>Three</p></div>
  <div id="box4"><p>Four</p></div>
</div>

Answer 6

If you're looking for a solution, you might want to consider the following approach:

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

#box1, #box2, #box3, #box4 {
  border: 1px dashed red;
  box-sizing: border-box;
  float: left;
}

#box1 {
    height: 40%;
    width: 35%;
}
#box2 {
    height: 40%;
    width: 65%;
}
#box3 {
    height: 60%;
    width: 35%;
}
#box4 {
    height: 60%;
    width: 65%;
}

<div class="container">
  <div id="box1"><p>One</p></div>
  <div id="box2"><p>Two</p></div>
  <div id="box3"><p>Three</p></div>
  <div id="box4"><p>Four</p></div>
</div>

Answer 7

Answer №4

Here is a solution for those issues:

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>

Answer 8

Here is a solution for those issues:

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>

Answer 9

Answer №5

It seems like this approach has potential

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>

Answer 10

It seems like this approach has potential

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>

Exploring the Four Quadrants of CSS

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Employ gulp for rebasing CSS URLs

Preventing scrolling in one div while focusing on another div

Modify vanilla JavaScript carousel for compatibility with Internet Explorer

Make an element in jQuery draggable but always within the viewport

Expand a list item to full width based on the number of items present

Is there a way to have the menu displayed on a single line and consistently centered?

Why does the lazy loading feature keep moving the background image around?

Is your margin not functioning correctly? Is padding taking on the role of margin?

:initial selector malfunctioning in CSS

Strategies for avoiding unused style tags in React components

"Resolving the duplication issue of a textbox in Phonegap app

Is there a way for me to display the comment count as text directly on the comment bubble image?

Relocate the preview division below the button in the Kartik File Input Widget

Issue with Sass @use failing to load partial

Determine the hue of the scrollbar

Troubleshooting problem with text overlaying images upon hovering in CSS

Styling nested divs in CSS

What is the best way to create a divider between tab panes in JavaFX?

The functionality of Google Maps code is limited on Android devices because the map feature is not available

Elegant CSS background image fade effect