diff --git a/layouts/partials/body.searchpage.html b/layouts/partials/body.searchpage.html
index 1c70900835..5c4667d50f 100644
--- a/layouts/partials/body.searchpage.html
+++ b/layouts/partials/body.searchpage.html
@@ -5,19 +5,21 @@
             </header>
             <h1 id="{{ $title | plainify | anchorize }}">{{ $title }}</h1>
 
-            <form action="javascript:triggerSearch()">
-              <div class="searchform">
-                <label class="a11y-only" for="R-search-by-detail">{{ T "Search" }}</label>
-                <input data-search-input id="R-search-by-detail" class="search-by" name="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
-                {{- partial "shortcodes/button.html" (dict
-                  "page" $page
-                  "type" "submit"
-                  "style" "secondary"
-                  "icon" "search"
-                  "content" (T "Search")
-                )}}
-              </div>
-            </form>
+            <search>
+              <form action="javascript:triggerSearch()">
+                <div class="searchform">
+                  <label class="a11y-only" for="R-search-by-detail">{{ T "Search" }}</label>
+                  <input data-search-input id="R-search-by-detail" class="search-by" name="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
+                  {{- partial "shortcodes/button.html" (dict
+                    "page" $page
+                    "type" "submit"
+                    "style" "secondary"
+                    "icon" "search"
+                    "content" (T "Search")
+                  )}}
+                </div>
+              </form>
+            </search>
             <div class="searchhint">
             </div>
             <hr>
diff --git a/layouts/partials/search.html b/layouts/partials/search.html
index 429caee47b..17960498e4 100644
--- a/layouts/partials/search.html
+++ b/layouts/partials/search.html
@@ -4,12 +4,14 @@
             {{- $link = partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}
           {{- end }}
         {{- end }}
-{{- $c:="" }}        {{ if $link }}<form action="{{ $link }}" method="get">{{ end }}<div class="searchbox default-animation">
-          {{ if $link }}<button class="search-detail" type="submit" title="{{ T "Search" }} (CTRL+ALT+f)">{{ end }}<i class="fas fa-search"{{ if not $link }} title="{{ T "Search" }} (CTRL+ALT+f)"{{ end }}></i>{{ if $link }}</button>{{ end }}
-          <label class="a11y-only" for="R-search-by">{{ T "Search" }}</label>
-          <input data-search-input id="R-search-by" name="search-by" class="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
-          <button class="search-clear" type="button" data-search-clear="" title="{{ T "Clear-search" }}"><i class="fas fa-times" title="{{ T "Clear-search" }}"></i></button>
-        </div>{{ if $link }}</form>{{ end }}
+        <search>{{ if $link }}<form action="{{ $link }}" method="get">{{ end }}
+          <div class="searchbox default-animation">
+            {{ if $link }}<button class="search-detail" type="submit" title="{{ T "Search" }} (CTRL+ALT+f)">{{ end }}<i class="fas fa-search"{{ if not $link }} title="{{ T "Search" }} (CTRL+ALT+f)"{{ end }}></i>{{ if $link }}</button>{{ end }}
+            <label class="a11y-only" for="R-search-by">{{ T "Search" }}</label>
+            <input data-search-input id="R-search-by" name="search-by" class="search-by" type="search" placeholder="{{ T "Search-placeholder" }}">
+            <button class="search-clear" type="button" data-search-clear="" title="{{ T "Clear-search" }}"><i class="fas fa-times" title="{{ T "Clear-search" }}"></i></button>
+          </div>
+        {{ if $link }}</form>{{ end }}</search>
         {{- $assetBusting := not .Site.Params.disableAssetsBusting }}
         {{- $pageBaseLang := replaceRE "([a-z]+).*" "${1}" .Page.Language.LanguageCode }}
         {{- $contentlangs := (union (slice | append (.Site.Params.additionalContentLanguage | default slice)) (slice $pageBaseLang)) }}
diff --git a/static/css/auto-complete.css b/static/css/auto-complete.css
index 337547aab9..9080dcb0d6 100644
--- a/static/css/auto-complete.css
+++ b/static/css/auto-complete.css
@@ -6,6 +6,7 @@
     border-top: 0;
     background: rgba( 255, 255, 255, 1 );
     box-shadow: -1px 1px 3px rgba( 0, 0, 0, .1 );
+    width: calc( 100% - 2rem );
 
     /* core styles should not be changed */
     position: absolute;
diff --git a/static/js/auto-complete.js b/static/js/auto-complete.js
index ab71ec4267..ae4960c0b7 100644
--- a/static/js/auto-complete.js
+++ b/static/js/auto-complete.js
@@ -93,9 +93,10 @@ var autoComplete = (function(){
                     pageXOffset = window.pageXOffset || document.documentElement.scrollLeft;
                     pageYOffset = window.pageYOffset || document.documentElement.scrollTop;
                 }
-                that.sc.style.left = Math.round(rect.left + pageXOffset + o.offsetLeft - parentOffsetLeft) + 'px';
-                that.sc.style.top = Math.round(rect.bottom + pageYOffset + o.offsetTop - parentOffsetTop) + 'px';
-                that.sc.style.width = Math.round(rect.right - rect.left) + 'px'; // outerWidth
+                // Is this really the job of the tool or should it be defered to the user?
+                // that.sc.style.left = Math.round(rect.left + pageXOffset + o.offsetLeft - parentOffsetLeft) + 'px';
+                // that.sc.style.top = Math.round(rect.bottom + pageYOffset + o.offsetTop - parentOffsetTop) + 'px';
+                // that.sc.style.width = Math.round(rect.right - rect.left) + 'px'; // outerWidth
                 if (!resize) {
                     that.sc.style.display = 'block';
                     if (!that.sc.maxHeight) { that.sc.maxHeight = parseInt((window.getComputedStyle ? getComputedStyle(that.sc, null) : that.sc.currentStyle).maxHeight); }
diff --git a/static/js/search.js b/static/js/search.js
index 9d412ad1d2..c63fab5c9e 100644
--- a/static/js/search.js
+++ b/static/js/search.js
@@ -271,7 +271,7 @@ function startSearch(){
 
     var searchList = new autoComplete({
         /* selector for the search box element */
-        selectorToInsert: '#R-header-wrapper',
+        selectorToInsert: 'search:has(.searchbox)',
         selector: '#R-search-by',
         /* source is the callback to perform the search */
         source: function(term, response) {