eliminate images "jumping" effect after loading the properties in image viewer

src/editor/ImageViewer.js

@@ -98,7 +98,7 @@ define(function (require, exports, module) {
         $("#img-preview").on("load", function () {
             // add dimensions and size
             _naturalWidth = this.naturalWidth;
-            var dimensionString = _naturalWidth + " x " + this.naturalHeight + " " + Strings.UNIT_PIXELS;
+            var dimensionString = _naturalWidth + " × " + this.naturalHeight + " " + Strings.UNIT_PIXELS;
             // get image size
             var fileEntry = new NativeFileSystem.FileEntry(fullPath);
             fileEntry.getMetadata(

src/htmlContent/image-holder.html

@@ -1,7 +1,9 @@
 <div id="image-holder">
     <div id="img-centering">
-        <div id="img-data"></div>
-        <div id="img-path"></div>
+        <div id="img-header">
+            <div id="img-data"></div>
+            <div id="img-path"></div>	
+        </div>
         <div id="img">
             <div id="img-scale"></div>
             <img id="img-preview" src="file:///{{fullPath}}">

src/styles/brackets.less

@@ -270,6 +270,13 @@ a, img {
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.36);
         max-height: 90%;
     }
+
+    #img-header {
+        display: inline-block;
+        width: 100%;
+        height: 38px;
+        margin-bottom: 15px;
+    }
 
     #img-data,
     #img-path {
@@ -281,10 +288,7 @@ a, img {
     #img-path::selection {
         background: @selection-color-focused;
     }
-
-    #img-path {
-        margin: 0 0 15px;
-    }
+
     #img {
         position: relative;
     }