title: Two divs side by side - Fluid display
body: <p>I am trying to place two divs side by side and using the following CSS for it.</p>
  
  <pre class="lang-css prettyprint-override"><code>#left {
    float: left;
    width: 65%;
    overflow: hidden;
  }
  
  #right {
    overflow: hidden;
  }
  </code></pre>
  
  <p>The HTML is simple, two left and right div in a wrapper div.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;div id="left"&gt;Left side div&lt;/div&gt;
    &lt;div id="right"&gt;Right side div&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried so many times to search for a better way on StackOverflow and other sites too, But couldn't find the exact help.</p>
  
  <p>So, the code works fine at first glance. Problem is this, that the left div gets padding/margin automatically as I increase width in (%). So, at 65% width, the left div is having some padding or margin and is not perfectly aligned with the right div, I tried to padding/margin 0 but no luck. Secondly, If I zoom in the page, the right div slides below the left div, Its like not fluid display.</p>
  
  <p>Note: I am sorry, I have searched a lot. This question has been asked many times but those answers aren't helping me. I have explained what the problem is in my case.</p>
  
  <p>I hope there is a fix for that.</p>
  
  <p>Thank you.</p>
  
  <p>EDIT: Sorry, me HTML problem, There were two "box" divs in both left and right sides, They had padding in %, So left side showed more padding because of greater width. Sorry, The above CSS works perfect, its fluid display and fixed, Sorry for asking the wrong question...</p>