title: Why can't a <button> element contain a <div>?
body: <p>My company is building a website and we had some problems with a JavaScript library not replacing something. We decided to throw our HTML in to the W3C validator and it informed us it's illegal to have a <code>&lt;div&gt;</code> tag inside a <code>&lt;button&gt;</code> tag.</p>
  
  <pre><code>&lt;button class="button" type="submit"&gt;
      &lt;div class="buttonNormalLargeLeft"&gt;&lt;!--#--&gt;&lt;/div&gt;
      &lt;div class="buttonNormalLargeCenter"&gt;Search Flights&lt;/div&gt;
      &lt;div class="buttonNormalLargeRight"&gt;&lt;!--#--&gt;&lt;/div&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>Results in:</p>
  
  <pre><code>Line 287, Column 46: Element div not allowed as child of element button in this context. (Suppressing further errors from this subtree.)
  </code></pre>
  
  <p>Edit: To clarify what we're trying to do here. We want to make a button with rounded corners that doesn't rely on <code>box-radius</code>. We made 3 divs in the button element each has his own sprite to make it appear rounded and allow for different widths. Other resources state that the button element was created for users that wanted a button to contain sub elements such as images but divs appear to be invalid for some reason.</p>
  
  <p>Why are divs not allowed inside button elements?</p>
  
  <p>What is the desired solution to this issue?</p>
  
  <p>Edit2:</p>
  
  <p>Why not use input? Because inputs can't have the desired layout</p>
  
  <p>Why not use divs? Because users without JavaScript won't be able to submit the form.</p>