2

Sorry in advance for stupid question - i have one container and 5 inner divs. When inner divs has only text content it looks like this: without content
But if i remove text content from all divs and add div with spans to first it will look like this with div and spans in it
If all divs except first (which has mixed content) has text content - like this: enter image description here
CSS of container:

.list {
    display: inline-block;
    font-size: 0;
    height: 100%;
    min-width: 100%;
    overflow: hidden;
    position: relative;
    right: 0;
    white-space: nowrap;
}

CSS of inner divs:

.list > div {
    background-image: url();
    background-size: cover;
    box-sizing: padding-box;
    display: inline-block;
    font-size: 15px;
    height: 100%;
    max-height: 752px;
    max-width: 1280px;
    padding: 0.7% 1.3% 0.3%;
}

Here you can have a look at the entire HTML and CSS.

What's going on, is it some textNodes messing it up?

ajp15243
  • 6,951
  • 1
  • 29
  • 38
lucifer63
  • 646
  • 6
  • 23
  • 1
    btw in your fiddle you first css selector has alot of elements in it you can use the universal selector `*` for all elements, just incase you didn't know :) – Eager Logic May 21 '15 at 13:49
  • Yeah, i know, but folks advised me to use this selector, dunno why) – lucifer63 May 21 '15 at 13:54
  • +1 for the diagrams making it very clear what is going on. However, it would be best to use a Code Snippet instead of a link to JSFiddle. – Andy Mercer May 21 '15 at 13:55
  • 1
    @AndyM A code snippet would indeed be great, but it doesn't exclude a JSFiddle link, where editing right off the bat is much easier to do. – ajp15243 May 21 '15 at 13:57

1 Answers1

7

This is just how display: inline-block; behaves when you put some content in. If you add vertical-align: top; to you .list > div CSS selector, then they will re-align to the top of their container regardless of content.

ajp15243
  • 6,951
  • 1
  • 29
  • 38
  • if i had to use inline-block, i generally added a float: left... should be the same right? (well in this case using inline-block would be meaningful... i know...) – sissy May 21 '15 at 13:50
  • 3
    @lucifer63 No need to feel stupid! `inline-block` has a lot of seemingly weird things in its spec that people don't anticipate or know about. – ajp15243 May 21 '15 at 13:52