[Solved] How to use a div tag to create a layout and make it responsive [closed]

by


Like this, if you do it without fancy flexbox stuff:

<div class="wrapper">
  <div class="right"></div>
  <div class="left">
    <div class="inner-top"></div>
    <div class="inner-bottom"></div>
  </div>
</div>

.wrapper {
  height: 200px;
  position: relative;
  width: 100%;
}

.right {
  width: 50%;
  background-color: blue;
  height: 100%;
  display:inline-block;
  float: left;
}

.left {
  width: 50%;
  background-color: red;
  height: 100%;
  display: inline-block;
}

.left .inner-top {
  height: 50%;
  width: 100%;
  background-color: yellow;
}

.left .inner-bottom {
    height: 50%;
    width: 100%;
    background-color: green;
}

Working codepen: https://codepen.io/leo-melin/pen/WNboeBb

solved How to use a div tag to create a layout and make it responsive [closed]