How can I put nav higher than it is using float and clear?

Issue

The structure I need to recreate

I need to put the bottom right rectangle below the blue square just like on the left side and I have trouble with it. I have to use float and clear. Currently it is too low. Only the shape matters.

.blok1_1 {
  background-color: cornflowerblue;
  width: 450px;
  height: 330px;
  float: left;
}

.blok1_2 {
  background-color: cornflowerblue;
  width: 362px;
  height: 330px;
  float: right;
  clear: right;
}

.blok1_3 {
  background-color: yellow;
  width: 1075px;
  height: 855px;
  float: right;
}

.blok1_4 {
  background-color: mediumspringgreen;
  width: 450px;
  height: 520px;
  float: left;
}

.blok1_5 {
  background-color: mediumspringgreen;
  width: 360px;
  height: 525px;
  float: right;
  clear: both;
}
<nav class="blok1_1">
</nav>
<nav class="blok1_2">
</nav>
<section class="blok1_3">
</section>
<nav class="blok1_4">
</nav>
<nav class="blok1_5">
</nav>

Solution

easiest way is to use flex

#container{
   display:flex;
   margin:0 auto;
   justify-content:center;
}

.end{
   display:flex;
   flex-direction:column;
}

.top{
   width:150px;
   height:200px;
   background-color:lightblue;
}

.bot{
   width:150px;
   height:400px;
   background-color:green;
}
 
#middle{
   width:150px;
   height:600px;
   background-color:yellow;
}
<div id='container'>
  <div class='end'>
    <div class='top'></div>
    <div class='bot'></div>
  </div>
  <div id='middle'>
  </div>
   <div class='end'>
    <div class='top'></div>
    <div class='bot'></div>
  </div>
 </div>

Answered By – DCR

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.