% values in css makes image disappear

Question

I'm having some issues with scaling my elements for responsiveness.

If I am using px values, the scaling is correct and behaves like I want it to. But since I want my mobile css to be compatible with as many devices as possible, I would prefer using % values. The problem is that as soon as I switch my px values to % values, my images/content either disappear or scale to very small proportions and change x & y position as well.

Is there any known issue that could cause browsers to struggle with % values? I've looked around but couldn't find anything that describes my issue.

Example of my issue:

With px values (working correctly): JSFiddle demo

.header{
    width: 30%;
    margin: auto;
    position: relative;
}

.logo{
    background-color: #FF0000;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: auto;
}

With % values (image disappears): JSFiddle demo

.header{
    width: 30%;
    margin: auto;
    position: relative;
}

.logo{
    background-color: #FF0000;
    width: 100%;
    height: 100%;
    display: inline-block;
    margin: auto;
}

Answer 1

The behaviour is absolutely correct. When you use % it means part of the total width of the parent container. In your example which uses % you say "take the whole available area". But the parent container has only width set. So, it gets it's 30% width, but there is no height added. If you add height: 200px; (for example) to your .header you will see that it works as expected -> http://jsfiddle.net/krasimir/aMXkg/11/

.header{
  width: 30%;
  height: 200px;
  margin: auto;
  position: relative;
}

  .logo{
    background-color: #FF0000;
    width: 100%;
    height: 100%;
    display: block;
    margin: auto;
  }