0

Css is always a new surprise to me.

I want to have 4 divs in-line next to each others (or 2 and 2, depends on parent size) As long as they are empty it works. as soon the get content it breaks, as the attached example shows.

I'm very confused. How can a content of one div affect a complete unrelated div?

.statistictable{
    display: inline-block;
    margin:20px;
    width: 300px;
    height:100px;
    background: #D9EFFF;
}
.statistics{
  border-bottom:5px solid;
}
<div class="statistics">
    <div class="statistictable">
I'am breaking!!!

    </div>
    <div class="statistictable">

    </div>
    <div class="statistictable">

    </div>
    <div class="statistictable">

    </div>
</div>
<div class="statistics">
    <div class="statistictable">


    </div>
    <div class="statistictable">

    </div>
    <div class="statistictable">

    </div>
    <div class="statistictable">

    </div>
</div>
Herr Derb
  • 4,977
  • 5
  • 34
  • 62
  • Sorry @Paulie_D, but I believe this question is either closed because of the wrong reason, or should not be closed at all. The question you are referring to is about vertical alignment, this question is not. – giorgio May 04 '16 at 15:46
  • @Paulie_D, his question is not answered by the question you refer to as a duplicate. – namlik May 04 '16 at 15:49
  • 2
    @giorgio, @namlik Well, since adding `vertical-align: middle;` to the `statistictable` class does fix the problem, I'd say it's a pretty close hit. – Thernys May 04 '16 at 15:52
  • @Paulie_D, well wadda ya know... i apologize then you'r right. – namlik May 04 '16 at 15:53
  • @Thernys Thanks But why all the sudden do I need this? why isn't it necessary without content? – Herr Derb May 04 '16 at 15:54
  • 1
    Perhaps this will explain http://stackoverflow.com/questions/12950479/why-does-inline-block-element-having-content-not-vertically-aligned .. @Paulie_D that answer might be a better reference for duplicate – Thernys May 04 '16 at 16:02
  • @Paulie_D Thernys is correct the issue is entirely related to baselines, and adding content to the element changes the baseline of the div – 42shadow42 May 04 '16 at 16:04
  • @Paulie_D please update the link to the better duplicate question, as it's answer is more correct! – 42shadow42 May 04 '16 at 16:08

1 Answers1

0

I would use span tags instead of divs as spans are by default inline. Does this give the expected result?

For example

<div class="statistics">
<span class="statistictable">


</span>
<span class="statistictable">
</span>
<span class="statistictable">

</span>
<span class="statistictable">

</span>
</div>
Michaël Fournier
  • 21
  • 5