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

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 >
</nav>
<nav >
</nav>
<section >
</section>
<nav >
</nav>
<nav >
</nav>

CodePudding user response：

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>

CodePudding user response：

So I assume this is an exercise with pretty specific requirements. In that case I don't think DCR's answer will suffice, altough I have to say that it would probably be the real-world solution these days. Especially the part where floats are replaced with flex and the html structure is changed in some grid like construction of a left, middle and right section. I fully believe that's the way to go.

BUT since it's an exercise and using float and clear are your only options. Have a look at the code below!

Use a container for the 4 square elements.
(the yellow part in the middle is just the background from the container)
The left elements float left and the right elements float right.
Since you want the bottom squares to be below the top squares instead of next to them you also add the clear left or right rule to these elements.

.container {
  background-color: yellow;
  width: 350px;
  height: 300px;
}


.left-top {
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  float: left;
}


.right-top{
  background-color: cornflowerblue;
  width: 100px;
  height: 100px;
  float: right;
}


.left-bottom {
  background-color: mediumspringgreen;
  width: 100px;
  height: 200px;
  float: left;
  clear: left;
}


.right-bottom {
  background-color: mediumspringgreen;
  width: 100px;
  height: 200px;
  float: right;
  clear: right;
}

<div >
  <div ></div>
  <div ></div>

  <div ></div>
  <div ></div>
</div>