title: Line-breaks between divs render a space. How to eliminate it from HTML?
body: <p>I have the following layout</p>
  
  <pre><code>&lt;div style="width:100px"&gt;
      &lt;div style="width:50%; display: inline-block;"&gt;
          div1
      &lt;/div&gt;
      &lt;div style="width:50%; display: inline-block;"&gt;
          div2
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>because in html there's a change-line between closing and opening div (div1 and div2), browsers add a "space" character in place of the line-break which results in having the second div to display underneath the first div.</p>
  
  <p>However if you remove the \n between the div1 and div2 then they display next to each other which is the expected behaviour.</p>
  
  <pre><code>&lt;div style="width:100px"&gt;
      &lt;div style="width:50%; display: inline-block;"&gt;
          div1
      &lt;/div&gt;&lt;div style="width:50%; display: inline-block;"&gt;
          div2
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However this makes code looks ugly. I am currently using <code>&lt;DOCTYPE html&gt;</code>. I have also tried switching to XHTML but didn't work. I am pretty sure there's some way of eliminating this behaviour of line-breaks, any ideas?</p>
  
  <p>FYI: I do not want to use float or parse my html output in php during rendering to remove the line-breaks.</p>