CODEWITHSUNDEEP
htmlcss
Jason
Jason

Reputation: 445

Divs using inline-block are overlapping

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.

Upvotes: 4

Views: 11569

Answers (3)

Edian Reyes
Edian Reyes

Reputation: 39

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.

Upvotes: 3

Pat Kearns
Pat Kearns

Reputation: 133

Removing the absolute positioning of the child elements will allow them to display inline as intended. Also, as stated only use id attributes for unique elements, use classes for repeating elements as in the example below.

#timer-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  display: table;
  background-color: black;
}
.timermode {
  width: 30%;
  font-family: "Avenir-Light";
  font-size: 40px;
  color: white;
  vertical-align: top;
  display: inline-block;
}
.timercontrol {
  display: inline-block;
  font-size: 40px;
  font-family: "Avenir-Light";
  color: white;
}
<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>

Upvotes: 1

Seva Kalashnikov
Seva Kalashnikov

Reputation: 4392

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 {
    ...
}

Upvotes: 4

Related Questions