[Solved] HTML CSS layout pushing elements down the page [closed]

by


As usual, Flexbox is our lord and saviour. Here’s your layout made with Flex.

.container {
  width: 500px;
  height: 250px;
  display: flex;
  border: #00f solid 2px;
}

.container .side {
  border: #ff0 dashed 3px;
  flex-basis: 33%;
  flex-shrink: 0; /* Prevents shrinking if .four grows */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Ensures perfect spacing of the elements on the left */
}

.container .side div {
  background: #008000;
  width: 100%;
  height: 30%;
}

.container .four {
  border: #f00 solid 3px;
  flex-grow: 1; /* Take remaining space */
}
<div class="container">
  <div class="side">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  <div class="four"></div>
<div>

solved HTML CSS layout pushing elements down the page [closed]