CODEWITHSUNDEEP
htmlcss
Gunslinger
Gunslinger

Reputation: 1521

html/css segment screen into 4 quadrants

I want to make a layout where the webpage is divided up as shown in the image below:

I've been trying to use a table tag but I need the whole screen to be used(100% width and height) and I would rather use more modern tags since I will have to end up using canvas in one of those segments anyway.

layout

Upvotes: 4

Views: 11891

Answers (2)

hmoore
hmoore

Reputation: 21

You could use css grid for this: https://codepen.io/heathrm/pen/BGJWvX

HTML:

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS:

.grid {
  border: 1px solid red;
  display: grid;
  grid-template-columns: 70% 30%;
  grid-auto-rows: 70vh 30vh;
}

.item {
  border: 1px solid black;
}

Upvotes: 2

Alexey Ivanov
Alexey Ivanov

Reputation: 8236

Like this? http://jsfiddle.net/NmjfE/

HTML:

<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>

CSS:

.tl { position: absolute; top: 0; left: 0; right: 30%; bottom: 30%; 
      background: red; border:solid #000; border-width: 0 10px 10px 0; }
.tr { position: absolute; top: 0; left: 70%; right: 0; bottom: 30%; 
      background: blue; border:solid #000; border-width: 0 0 10px 0; }
.bl { position: absolute; top: 70%; left: 0; right: 30%; bottom: 0; 
      background: yellow; border:solid #000; border-width: 0 10px 0 0; }
.br { position: absolute; top: 70%; left: 70%; right: 0; bottom: 0; 
      background: green; }

Upvotes: 11

Related Questions