HTML bar should cross all divs

Question

i have a problem with html or css or both. i am looking for a possibility to create a bar that crosses all divs. The picture above demonstrates my project.

I would like to do it in css rather than to place a separate picture. Is that possible?

thanks ahead.

You should Google "css absolute positioning" – Mr Lister Nov 26 '16 at 18:12 — Mr Lister, Nov 26 '16 at 18:12

score 0 · Answer 1 · answered Nov 26 '16 at 19:45

Look into the CSS position property.

.child {
  height: 100px;
  background-color: blue;
  margin: 5px 0;
  border-radius: 8px;
}

.container {
  position: relative;
}

.left-bar {
  position: absolute;
  background-color: red;
  height: 100%;
  width: 20%;
  border-radius: 8px;
}

<div class="container">
  <div class="left-bar">
  </div>
  
  <div class="child">
  </div>
  
  <div class="child">
  </div>
  
  <div class="child">
  </div>
</div>

HTML bar should cross all divs

1 Answers1