0

I have a quiet simple html structure but I can't figure out what I have to do to place the 8 on top of the 0 without losing the height of the wrapping div.

If I use for example float or absolute position on both spans, the divs height is reduced to 0. If I use a combination of absolute position and float on the second div, I cant manage to properly center the span horizontally in the container.

I hope you can tell me what I'm doing wrong and how I can move the second span on top of the first one while letting the first span determine the height of the wrapping div.

#wrapper {
  position: relative;
  width: 100%;
  text-align: center;
}

#first {
}

#first {
}
<div id="wrapper">
   <span id="first">0</span>
   <span id="second">8</span>
</div>
xxtesaxx
  • 6,175
  • 2
  • 31
  • 50

1 Answers1

0

You can center absolutely-positioned elements by using a combination of left: 50% and a negative transform, which will allow you to center the 8 element above the 0:

#wrapper {
  position: relative;
  width: 100%;
  height: auto;
  text-align: center;
}

#first, #second {
  color: white;
  display: block;
}

#first {
  background: blue;
  height: 50px;
  padding: 30px
}

#second {
  background: red;
  height: 10px;
  padding: 10px;
  position: absolute;
  top: 0;
  left:50%;
  transform: translateX(-50%);
}
<div id="wrapper">
   <span id="first">0</span>
   <span id="second">8</span>
</div>
Rich
  • 3,156
  • 3
  • 19
  • 29
  • Thanks a lot. The transform: translateX(-50%); indeed was the missing piece. I wanted to put the 8 right over the 0 so they would overlap. The height and everything was not really needed but thanks a lot for pointing out the transform – xxtesaxx Jul 18 '17 at 01:04