diff --git a/css/fixedPosInterface.css b/css/fixedPosInterface.css
index 2da5bb4..c63af8e 100644
--- a/css/fixedPosInterface.css
+++ b/css/fixedPosInterface.css
@@ -43,12 +43,13 @@ body {
   left: 0;
   right: 0;
   width: 100%;
-  max-width: 1024px;
   height: 100%;
+  max-width: 1024px;
+  max-height: 768px;
   margin: 0px auto;
 }
 /* http://stackoverflow.com/questions/8129524/simulate-inner-border-in-css */
-#landscape:after {
+#landscape:before {
   content:' ';
   display:block;
   position:absolute;
@@ -93,15 +94,75 @@ body {
   left: 50%;
   /*margin: -225px 0 0 -325px;*/
   background-color: #fff;
-  width: 75%;
+  width: 65%;
   min-width: 150px;
   max-width: 650px;
-  height: 70%;
+  height: 60%;
   min-height: 150px;
+  max-height: 450px;
   border: 4px solid #000;
   border-radius: 15px;
 }
 
+#canvasContainers {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  /*height: 100%;*/
+  background-color: #0e0;
+}
+
+#mycanvas, #preview {
+  /*border: 1px solid #08c;*/
+  /*float:left;*/
+}
+
+#mycanvasContainer {
+  display: table-cell;
+  float:left;
+}
+
+#previewContainer {
+  display: table-cell;
+}
+
+#mycanvas {
+  /*width: 500px;*/
+  /*height: 450px;*/
+  /*border: 0px solid #333;*/
+  border-right: 2px solid #333;
+  /*background-color: #f0f;*/
+
+  /*position: absolute;*/
+  /*top: 0;*/
+  /*bottom: 0;*/
+  /*left: 0;*/
+  /*right: 0;*/
+  /*width: 80%;*/
+  /*float:left;*/
+  /*width: 100%;*/
+  /*height: 100%;*/
+  background: #808;
+}
+
+#preview {
+  /*border: 1px solid #f8c;*/
+  /*position: absolute;*/
+  /*right: 0px;*/
+  /*top: 0px;*/
+
+  float:right;
+  width: 150px;
+  height: 100%;
+  background: #f44;
+
+  /*width: 150px;*/
+  /*height: 450px;*/
+}
+
 #preview_tmp {
   position: absolute;
   top: 0px;
@@ -111,41 +172,6 @@ body {
   display: none;
 }
 
-#mycanvas, #preview {
-  /*border: 1px solid #08c;*/
-  float: left;
-}
-
-#mycanvas {
-  /*width: 500px;*/
-  /*height: 450px;*/
-  /*border: 0px solid #333;*/
-  /*border-right: 2px solid #333;*/
-  /*background-color: #f0f;*/
-
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 80%;
-  height: 100%;
-  background: #808;
-}
-
-#preview {
-  /*border: 1px solid #f8c;*/
-  position: absolute;
-  right: 0px;
-  top: 0px;
-
-  /*width: 150px;*/
-  /*height: 450px;*/
-
-  width: 20%;
-  height: 100%;
-}
-
 
 /*
 
@@ -245,7 +271,6 @@ body {
 
 
 /* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
-/*
 @media screen and (max-height: 675px) {
 	.bgMiddle {
 		display: none;
@@ -284,10 +309,10 @@ body {
     -moz-transform: scale(.94);
 	}
 
-	#drawAreaContainer {
-	  top: 128px;
-	  height: 350px;
-	}
+	/*#drawAreaContainer {*/
+	  /*top: 128px;*/
+	  /*height: 350px;*/
+	/*}*/
 }
 
 @media screen and (max-height: 560px) {
@@ -331,12 +356,11 @@ body {
     -moz-transform: translate(-5px,-10px);
   }
 
-  #drawAreaContainer {
-	  top: 110px;
-	  height: 350px;
-	}
+  /*#drawAreaContainer {*/
+	  /*top: 110px;*/
+	  /*height: 350px;*/
+	/*}*/
 }
-//*/
 
 
 
diff --git a/index.html b/index.html
index 4e462dd..73c4f17 100755
--- a/index.html
+++ b/index.html
@@ -55,8 +55,14 @@
     </div>
   </div>
   <div id="drawAreaContainer">
-    <canvas id="mycanvas"></canvas>
-    <canvas id="preview"></canvas>
+    <div id="canvasContainers">
+      <div id="mycanvasContainer">
+        <canvas id="mycanvas"></canvas>
+      </div>
+      <div id="previewContainer">
+        <canvas id="preview"></canvas>
+      </div>
+    </div>
     <canvas id="preview_tmp"></canvas>
     <div class="manipulationBtns cf">
       <div id="btnsUpDown">
diff --git a/js/init_layout.js b/js/init_layout.js
index b18fc78..b7e3262 100644
--- a/js/init_layout.js
+++ b/js/init_layout.js
@@ -115,18 +115,21 @@ function doOnResize() {
 
   // code from new layouting approach... //TODO give this a more logical spot
   $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
-  doodleCanvas.width = doodleCanvas.clientWidth;
-  doodleCanvas.height = doodleCanvas.clientHeight;
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
   //  $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
   //  $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
   //  canvas.width = parseInt($canvas.css("width"), 10);
   //  canvas.height = parseInt($canvas.css("height"), 10);
-  preview.width = parseInt($preview.css("width"), 10);
-  preview.height = parseInt($preview.css("height"), 10);
+//  preview.width = parseInt($preview.css("width"), 10);
+//  preview.height = parseInt($preview.css("height"), 10);
   canvasWidth = canvas.width;
   canvasHeight = canvas.height;
 
-  //return;
+  redrawDoodle();
+  redrawPreview();
+
+  return;
 
 //  doClientAndOrientationStuff() // <-- is this necessary in this method?
 
@@ -164,16 +167,25 @@ function initLayouting() {
   <!--canvas mycanvas       500, 450-->
   <!--canvas preview      150, 450-->
 
-  // code from new layouting approach... //TODO give this a more logical spot
+  $drawAreaContainer = $("#drawAreaContainer");
+//  $doodleCanvas = $("#mycanvas");
+//  doodleCanvas = $("#mycanvas")[0];
+//  doodleCanvasContext = doodleCanvas.getContext('2d');
+
+  $drawAreaContainer.css("margin", 0);
+  $drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2);
   $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
-  doodleCanvas.width = doodleCanvas.clientWidth;
-  doodleCanvas.height = doodleCanvas.clientHeight;
+
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+
+  // code from new layouting approach... //TODO give this a more logical spot
 //  $("#drawAreaContainer").attr("width", parseInt($("#drawAreaContainer").css("width"), 10));
 //  $("#drawAreaContainer").attr("height", parseInt($("#drawAreaContainer").css("height"), 10));
 //  canvas.width = parseInt($canvas.css("width"), 10);
 //  canvas.height = parseInt($canvas.css("height"), 10);
-  preview.width = parseInt($preview.css("width"), 10);
-  preview.height = parseInt($preview.css("height"), 10);
+//  preview.width = parseInt($preview.css("width"), 10);
+//  preview.height = parseInt($preview.css("height"), 10);
   canvasWidth = canvas.width;
   canvasHeight = canvas.height;
 
@@ -184,7 +196,8 @@ function initLayouting() {
   //  imgDims[0] = parseInt($(".container").css("width").match(/[0-9]+/).join(""));
   //  imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
 
-  imgDims = [1024, 768];
+//  imgDims = [1024, 768];
+
   /*
    if( /Android|webOS|BlackBerry/i.test(navigator.userAgent) ) {
    imgDims[1] = parseInt($(".container").css("height").match(/[0-9]+/).join(""));
diff --git a/js/main.js b/js/main.js
index 5bf35f7..2c8dd6d 100644
--- a/js/main.js
+++ b/js/main.js
@@ -14,18 +14,7 @@ $(function() {
   console.log("ready");
 
 
-  //TODO give more logical place in code
-  $drawAreaContainer = $("#drawAreaContainer");
-  $doodleCanvas = $("#mycanvas");
-  doodleCanvas = $("#mycanvas")[0];
-  doodleCanvasContext = doodleCanvas.getContext('2d');
-
-  $drawAreaContainer.css("margin", 0);
-  $drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2);
-  $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height"))/2);
-
-  doodleCanvas.width = doodleCanvas.clientWidth;
-  doodleCanvas.height = doodleCanvas.clientWidth;
+  //TODO give this a more logical place in code