add search ui

make search+input boxes share a fixed div, use floats for nice(er)
responsiveness to width changes.

2 files changed, 27 insertions, 10 deletions

diff --git a/index.html b/index.html
index 170a94d7..2bd44cd0 100644
--- a/index.html
+++ b/index.html
@@ -48,9 +48,13 @@
     </div>
 
 
-
-   <div id="suggestion" >
-       <form> <input id="textanalyser" size="70" placeholder="Type here to create a network:"/></form>
+    <div id="textinputui">
+        <div id="suggestion" >
+           <form> <input id="textanalyser" size="70" placeholder="Type here to create a network"/></form>
+        </div>
+        <div id="searchdiv" >
+           <form> <input id="search" size="70" placeholder="Type search query"/></form>
+        </div>
     </div>
 
     <div class="typeselection">
diff --git a/res/css/style.css b/res/css/style.css
index 00593ad7..df1a2e5f 100644
--- a/res/css/style.css
+++ b/res/css/style.css
@@ -70,23 +70,36 @@ a:active {
     color: #FFF;
 }
 
-#textanalyser{
+#textinputui {
   position: fixed;
+  display: block;
+  top: 40px;
+  left: 20px;
+  right: 400px;
+}
+
+#textanalyser{
+  float: left;
   height:30px;
   max-width: 70%;
+  width:900px;
 }
 
 input:focus {
-
 }
 
 #suggestion{
-  display:block;
-  position:fixed;
-  top:30px;
-  left:20px;
   list-style-type: none;
-  width:900px;
+}
+
+#search {
+    height: 30px;
+    max-width: 100%;
+}
+
+#searchdiv {
+    width: 200px;
+    float: right;
 }
 
 .node {