Matěj Zmítko Matěj Zmítko - 12 days ago 7
CSS Question

Div above another div and next to each other

I searched and found similar cases, but not exactly the same and I am not fluid in CSS.

I have four divs next to each other and I need another div above each of these divs. I tried to set

width
, change
position
,
display
divs differently, but I did not get a right result.

You can see my code over here:
https://jsfiddle.net/Zmitas/y9kk9kvt/

So far I managed to get them next to each other but I did not manage to fix the "steps" appearance.

Thanks for all answers

Answer

Update css & HTML

#one {
  width: 100%;
  height: 600px;
  background-color: #333;
  float: left;
}
#two {
  width: 100%;
  height: 600px;
  float: left;
  background-color: #666;
}
#three {
  width: 100%;
  height: 600px;
  float: left;
  background-color: #333;
}
#four {
  width: 100%;
  height: 600px;
  background-color: #666;
  float: left;
}
.above {
  position: relative;
  width: 25%;
  float: left;
}
<div class="above">
  <div>text above</div>
  <div id="one">Div one</div>
</div>

<div class="above">
  <div>text above</div>
  <div id="two">Div two</div>
</div>

<div class="above">
  <div>text above</div>
  <div id="three">Div three</div>
</div>

<div class="above">
  <div>text above</div>
  <div id="four">Div four</div>
</div>