title: How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size
body: <p>Here i want to use two buttons which cover the entire screen width and the buttons should have equal width. And alo there should not be any space between these buttons.</p>
  
  <p>I tried with the following HTML and CSS codes but i didn't get what i expect; </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#container
  {
      width:100%
  }         
  #button1
  {
      width:50%;
  }
  #button2
  {
      width:50% 100%;
  }
  </code></pre>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;button id="button1"&gt;Button1&lt;/button&gt;
    &lt;button id="button2"&gt;Button2&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried the code <a href="http://jsfiddle.net/XkhwQ/1/" rel="nofollow">here</a> here the buttons not covering the entire screen size also a small gap is there between these two buttons. How to tackle this issue? Thank you..</p>