Divs using inline-block are overlapping

Question

I have a problem with my divs overlapping each other, with no space in between them. I've tried text-align center, removing and adding white space between the divs, setting margins, nothing seems to work. I just need these items to be spaced apart. Any help is appreciated.

Here is an example fiddle: https://jsfiddle.net/vn6t3nwd/

HTML:

<div id="timer-container">
  <div id="timermode">up</div><div id="timermode">down</div>
  <div id="timercontrol">stop</div>
  <div id="timercontrol">go</div>
</div>

CSS:

#timer-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    display: table;
    background-color: black;
}

#timermode {
    position: absolute;
    width: 30%;
    font-family: "Avenir-Light";
    font-size: 40px;
    color: white;
    vertical-align: top;
    display: inline-block;
}

#timercontrol {
    position: absolute;
    display: inline-block;
    font-size: 40px;
    font-family: "Avenir-Light";
    color: white;
}

Edit: The problem was having position: absolute, however removing it causes the height of my background to increase slightly. I think it is due to my 56.25% padding on the bottom but I need to have that. Anyway to have it both ways?

Edit2: Updated the fiddle with the answer. I got around my height increase by adding another container.

Answer 1

You have overlapping because of position: absolute;

Also, id is made to be unique identifier, if you need to use same css for multiple html elements you should define it as a class

HTML:

<div id="timer-container">
  <div class="timermode">up</div>
  <div class="timermode">down</div>
  <div class="timercontrol">stop</div>
  <div class="timercontrol">go</div>
</div>

CSS:

#timer-container {
    ...
}
.timermode {
    ...
}
.timercontrol {
    ...
}

Answer 2

I'm a young aspiring programmer so my answer may and may not help you. I think it's because of the position absolute. I edit your code in JSFiddel and notice that when I remove the absolute style it position all of the elements according to their relative position. Hope it helps. Happy coding.