updated html and css to try to prevent wrapping issue

cadoughe · cadoughe · commit 2025310d396c · 2012-12-14T11:01:39.000-05:00
diff --git a/spec/caroline.css b/spec/caroline.css
@@ -3,25 +3,52 @@
     height: 100%;
     position: relative;
     overflow: auto;
+	font-family:Arial, Helvetica, sans-serif;
+	color:#333;
+	display:block;
+}
+
+/*left side styles*/
+
+.left {
+	width:30%;
+	margin:.2em;
+	padding:.2em;
+	display:block;
+	float:left;
+	position:relative;
 }
 .js-multigraph-tester-mugl {
     float: left;
-    width: 33%;
+    width: 100%;
     height: 100%;
     border-right: 1px solid rgba(192, 192, 192, 0.7);
-    padding: 0px 10px;
+    padding: auto;
 }
 .js-multigraph-tester-textarea {
     position: relative;
     width:100%;
     height:100%;
 }
+
+/*right side styles*/
+
+.right {
+	width:65%;
+	margin:.2em;
+	padding:.2em;
+	display:block;
+	float:left;
+	position:relative;
+}
+
+
 .js-multigraph-tester-display {
     position: relative;
     float: left;
-    width: 63%;
+    width: 100%;
     height: 100%;
-    padding: 0px 10px;
+    padding: auto;
     overflow: auto;
 }
 .js-multigraph-tester-graph {
diff --git a/spec/caroline.html b/spec/caroline.html
@@ -17,10 +17,23 @@
 
   <body>
 
+	<!-- full container div -->
     <div class="js-multigraph-tester">
+    
+      <!-- left side -->
+      
+      <div class="left">
+      
       <div class="js-multigraph-tester-mugl">
         <div class="js-multigraph-tester-textarea" id="foobar"></div>
-      </div>
+      </div> 
+      
+      </div><!-- end left side -->
+      
+      <!-- right side -->
+      
+      <div class="right">
+      
       <div class="js-multigraph-tester-display">
         <div class="js-multigraph-tester-graph"></div>
         <br/>
@@ -48,8 +61,11 @@
             <input type="button" value="refresh"/>
           </div>
         </div>
-      </div>
-    </div>
+      </div> 
+      
+      </div><!-- end right side -->
+      
+    </div> <!-- end full container -->
 
   </body>
 </html>
