'How to space divs that are stacked on top of each other

So, this is my code:

.headline {
  font-size: 61px;
  font-family: 'Gotham Pro Medium', sans-serif;
  /* font-weight: 700; */
  color: rgb(81, 83, 74);
  text-transform: uppercase;
  line-height: .9;
  -moz-transform: matrix( 0.99960015993603, 0, 0, 1.00025484199796, 0, 0);
  -webkit-transform: matrix( 0.99960015993603, 0, 0, 1.00025484199796, 0, 0);
  -ms-transform: matrix( 0.99960015993603, 0, 0, 1.00025484199796, 0, 0);
  /* position: absolute; */
  margin: auto;
  left: 61.909px;
  top: 230px;
  width: 490px;
  height: 55px;
  z-index: 11;
}
<div class="headline">WE BELIEVE</div>
<div class="headline">GREAT PEOPLE</div>
<div class="headline">DESERVE TOP</div>
<div class="headline">REWARDS.</div>
<div class="subhead">Make your mark at RapidScale.</div>

In JSfiddle it looks a lot better than how it renders in my browser:

I am not sure why these produce different results, but basically I just want the lines to stack on top of each other instead of in-line. Can you please help me?

htmlcsscss-position


Solution 1:[1]

Remove any absolute positioning. It's not needed. Nest the code in a wrapper and simplify it with flex. Specify flex-direction: column; then you can specify a gap for however much you want them spaced.

.headline {
  font-size: 61px;
  font-family: 'Gotham Pro Medium', sans-serif;
  color: rgb(81, 83, 74);
  text-transform: uppercase;
  line-height: .9;
  margin: auto;
  width: 490px;
  height: 55px;
  z-index: 11;
}

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
<div class="wrapper">
  <div class="headline">WE BELIEVE</div>
  <div class="headline">GREAT PEOPLE</div>
  <div class="headline">DESERVE TOP</div>
  <div class="headline">REWARDS.</div>
  <div class="subhead">Make your mark at RapidScale.</div>
</div>

Solution 2:[2]

The issuer is caused by you setting position : absolute in both banner * {} and .headline {}. The presence of either causes the headlines to collapse to the same spot.

In this JSFiddle I was able to replicate the problem by adding position : absolute to div {}.

Replacing the position : absolute with position : relative for .headline {} should fix this issue, as demonstrated in this JSFiddle.

Solution 3:[3]

You just need to update your .wrapper & .headline with my given css and it'll work perfectly.

.headline {
    position: relative;
    font-size: 61px;
    font-family: 'Gotham Pro Medium', sans-serif;
    color: rgb(81, 83, 74);
    text-transform: uppercase;
    line-height: .9;
    -moz-transform: matrix( 0.99960015993603,0,0,1.00025484199796,0,0);
    -webkit-transform: matrix( 0.99960015993603,0,0,1.00025484199796,0,0);
    -ms-transform: matrix( 0.99960015993603,0,0,1.00025484199796,0,0);
    left: 61.909px;
    top: 230px;
    width: 490px;
    height: 55px;
    z-index: 11;
}

.wrapper {
    position: relative;
    width: 1200px;
    height: 628px;
    overflow: hidden;
    border: solid 1px red;
    display: flex;
    flex-direction: column;
}
<div class="wrapper">
  <div class="headline">WE BELIEVE</div>
  <div class="headline">GREAT PEOPLE</div>
  <div class="headline">DESERVE TOP</div>
  <div class="headline">REWARDS.</div>
</div>

You can check my edit of your code here.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kameron
Solution 2
Solution 3 alitjanjua

Related Questions