I'm trying to use a div to submit a form. Here's the HTML:

<form name="search-form" 
      id="search-form" 
      action="php.php" 
      class="form-search">
    <input style="color: black; background: rgba(255,255,255,0.5); padding: 15px; font-size: 18px;" 
           type="text" 
           name="search" 
           class="input-medium search-query">
        <div class="button1" onClick="document.forms["search-form"].submit();">
            <a href="#">
                <img  alt="" src="/img/buttons/icon1.png" />
    </form>
The form does not submit when the div is clicked. Could someone point out the problem?

thanks. I've been trying this for an hour at least.
The a href is needed to keep the styling, but even if I remove it and left with just the icon, the submit doesn't work; nor does it work if I apply the onclick to the image.
Related Solutions
Html – How to disable browser autocomplete on web form field / input tags

Firefox 30 ignores autocomplete="off" for passwords, opting to prompt the user instead whether the password should be stored on the client. Note the following commentary from May 5, 2014:
The password manager always prompts if it wants to save a password. Passwords are not saved without permission from the user.
We are the third browser to implement this change, after IE and Chrome.
According to the Mozilla Developer Network documentation, the Boolean form element attribute autocomplete prevents form data from being cached in older browsers.
<input type="text" name="foo" autocomplete="off" />
    
Html – Make a div fill the height of the remaining screen space

2015 update: the flexbox approach
There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.
  
Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.
  
(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.
To check current support you can also see here:
http://caniuse.com/#feat=flexbox
Working example
With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.
html,
body {
  height: 100%;
  margin: 0;
.box {
  display: flex;
  flex-flow: column;
  height: 100%;
.box .row {
  border: 1px dotted grey;
.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
.box .row.content {
  flex: 1 1 auto;
.box .row.footer {
  flex: 0 1 40px;
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />(sized to content)</p>
  <div class="row content">
      <b>content</b>
      (fills remaining space)
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
            
Related Question
JavaScript post request like a form submit
Javascript – How to change an element’s class with JavaScript
Html – How to make a div not larger than its contents
Html – Two submit buttons in one form
Html – How to make a div 100% height of the browser window
Javascript – jQuery AJAX submit form
Html – Change a HTML5 input’s placeholder color with CSS