Aymen Kareem Aymen Kareem - 1 month ago 9
CSS Question

Positioning div's in html and CSS

I have 5 div's as follows:

<div class="centered" style="background-color:red;">top</div>
<div style="background-color:orange;">left</div>
<div style="background-color:yellow;">center</div>
<div style="background-color:green;">right</div>
<div class="centered" style="background-color:blue;">bottom</div>


I want to place the first one (with centered class) on the top-center, and the second (with "left" text), third (with "center" text) and the fourth (with "right" text) in one row in the center right below the top. Lastly, the fifth (with centered class) in the bottom center below the line of 3 div's.
I tried but it was just a waste of time. Can you help me with css?

Tim Tim
Answer

Like this?

div {
  height: 200px;
  
  display: border-box;
}

.centered {
  margin: 0 auto;
  width: 33.33%;
}

.row {
    
}

.row div {
  width: 33.33%;
  float: left;
}

.row:after {
  display: table;
  content: ' ';
  clear: both;
}
<div class="centered" style="background-color:red;">top</div>
<div class="row">
  <div style="background-color:orange;">left</div>
  <div style="background-color:yellow;">center</div>
  <div style="background-color:green;">right</div>
</div>
<div class="centered" style="background-color:blue;">bottom</div>