Responsive vertical align items in div heights in %

Question

I am trying to align vertical all divs as shown in the image.so far I have everything with margins and paddings in % and it works. But i think is a bit old school, and maybe could be done using another method.

Other solutions as display table, table-cell, flex dont help at all...

.holder {
   width:80%;
   height:30%;
   position: relative;
   margin: 0 auto;
}
.item-1 {
   position: absolute;
   z-index: 1;
   width: 20%;
   height: 20%;
   background: red;
   left: 0;
}
.item-2 {
   position: absolute;
   z-index: 2;
   width: 25%;
   height: 30%;
   background: blue;
   right:0;
}
.item-1:after, .item-2:after {
   content:'';
   display: block;
   padding-bottom: 100%;
}
.txt-holder {
   position: absolute;
   z-index: 11;
   width: 40%;
   margin: 0 auto;
   background: gold;
   left: 0;
   right: 0;
}

Basically the html structure goes like this.

<div class="holder">
   <div class="item-1"></div>
   <div class="txt-holder">
       <h1>header title</h1>
       <p>any texts</p>
   </div>   
   <div class="item-2"></div>
</div>

This has already been answered here; http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div?rq=1. It might be related to what you are asking if I understand what you're asking — zik, Jan 17 '17 at 07:55
Possible duplicate of [Vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — andy jones, Jan 17 '17 at 08:05
Thanks, great post but dont help, vertical-align, display table options was my first option, also tried display flex. Edited my code because was incomplete. main issue is that the divs must be in diferents z-index with absolute position. — Tyra Pululi, Jan 17 '17 at 08:07
Not a duplicate, completely different scenario. All solutions previously found in sw didnt help... — Tyra Pululi, Jan 17 '17 at 08:08
I am using padding and margin with size in % for the vertical aligment, tried vw and rem but the results was a bit more precise in % but still is not as accurate as in other situations when I can use vertical-align. — Tyra Pululi, Jan 17 '17 at 08:14
Developing time is huge, takes me ages to calculate all the different paddings and margins. And since I am calculating the positions the result isnt 100% perfect — Tyra Pululi, Jan 17 '17 at 08:28
@TyraPululi I just answered a similar question [here](http://stackoverflow.com/questions/41687869/using-opacity-to-change-the-stacking-order/41689019#41689019) with a nice interactive demo. — zer00ne, Jan 17 '17 at 08:36
After giving it a thought, I dont really think this way is inefficient, I am just wondering if its a better way to do it, maybe I should re-arrange the layout — Tyra Pululi, Jan 17 '17 at 08:37
http://stackoverflow.com/questions/41687869/using-opacity-to-change-the-stacking-order/41689019#41689019 — zer00ne, Jan 17 '17 at 08:39
@ze00ne Just saw, your post. I think that I should give it a thought, rearrange the layout, I'll post my final solution in case anyone needs it. — Tyra Pululi, Jan 17 '17 at 08:46
@TyraPululi I really don't understand what your objective is or what exactly the results should be. You mentioned `z-index` and `absolute` and figured you needed to see how `z-index` works. You mention layout but nothing specific, like if there's something not behaving as you expected it to or you can't figure how to do something. *I am trying to achieve this a different way,* What way is that? *Maybe my error is related to absolute positioning?* What error? — zer00ne, Jan 17 '17 at 08:51
Guess you are right, i didnt explain my self good enough. I'ill try again by modifying the op, thanks — Tyra Pululi, Jan 17 '17 at 10:16

Takit Isy · Answer 1 · 2018-04-27T07:30:03.450

Is this correct for you to use that kind of solution?
(See some comments in the snippet)

/* Added body, because your .holder was 30% height of nothing as no parent had a size */

body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 40px; /* Adding this offset for better visibility when the snippet isn't full-size */
}


/* Added these two classes */

.border1 { /* For better visibility of the objects */
  border: 1px solid black;
}

.center-y { /* For vertical centering, the parent element needs to be relative */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}


/* Modified some below */

.holder {
  width: 80%;
  height: 30%;
  position: relative;
  margin: 0 auto;
}

.item-1 {
  /*position: absolute;*/
  z-index: 1;
  width: 20%;
  height: 20%;
  background: red;
  left: 0;
}

.item-2 {
  /*position: absolute;*/
  z-index: 2;
  width: 25%;
  height: 30%;
  background: blue;
  right: 0;
}


/* What the :afters are used for ? */

.item-1:after,
.item-2:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.txt-holder {
  /* position: absolute; */
  z-index: 11;
  width: 40%;
  margin: 0 auto;
  background: gold;
  left: 0;
  right: 0;
}

<body>
  <div class="holder border1">
    <div class="item-1 center-y border1"></div>
    <div class="txt-holder center-y border1">
      <h1>header title</h1>
      <p>any texts</p>
    </div>
    <div class="item-2 center-y border1"></div>
  </div>
</body>

I hope it helps in any way.

Responsive vertical align items in div heights in %

1 Answers1