How to set height depending on width percentage - pure css

Question

I have a div that have a 50% of screen's width. inside of it I want to make four squares:

<div style="width:50%">
  <div style="width:25%"></div>
  <div style="width:25%"></div>
  <div style="width:25%"></div>
  <div style="width:25%"></div>
</div>

but I don't know how to calculate of height of them. I don't want to use js.

I don't understand what your desired end goal is. Could you maybe add an image or sketch describing it? — Bassie-c, Feb 07 '19 at 22:54

Abion47 · Answer 1 · 2019-02-07T23:18:53.673

Instead of percentages, have your inner divs use viewport-percentage lengths:

<div style="width:50%;background-color:red;">
    <div style="width:25vw;height:25vw;background-color:blue;"></div>
    <div style="width:25vw;height:25vw;background-color:green;"></div>
    <div style="width:25vw;height:25vw;background-color:blue;"></div>
    <div style="width:25vw;height:25vw;background-color:green;"></div>
</div>

(Background colors for the purpose of the demo.)

How to set height depending on width percentage - pure css

1 Answers1