fluid layout - % values in css makes image disappear -


i'm having issues scaling elements responsiveness.

if using px values, scaling correct , behaves want to. since want mobile css compatible many devices possible, prefer using % values. problem switch px values % values, images/content either disappear or scale small proportions , change x & y position well.

is there known issue cause browsers struggle % values? i've looked around couldn't find describes issue.

example of 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; } 

  • % 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; } 

    the behaviour absolutely correct. when use % means part of total width of parent container. in example uses % "take whole available area". parent container has width set. so, gets it's 30% width, there no height added. if add height: 200px; (for example) .header see works 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;   } 

    Comments

    Popular posts from this blog

    java - activate/deactivate sonar maven plugin by profile? -

    python - TypeError: can only concatenate tuple (not "float") to tuple -

    java - What is the difference between String. and String.this. ? -