<p>I expected the two <code>span</code> tags in the following sample to display next to each other, instead they display one below the other. If I set the <code>width</code> of the class <code>span</code>.right to 49% they display next to each other. I am not able to figure out why the right span is pushed down like the right span has some invisible <code>padding/margin</code> which makes it take more than 50%. I am trying to get this done without using html tables. Any ideas?</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  margin: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  border: none;
}

div.header {
  width: 100%;
  height: 80px;
  vertical-align: top;
}

span.left {
  height: 80px;
  width: 50%;
  display: inline-block;
  background-color: pink;
}

span.right {
  vertical-align: top;
  display: inline-block;
  text-align: right;
  height: 80px;
  width: 50%;
  background-color: red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;Test Page&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;
  &lt;div class='header'&gt;
    &lt;span class='left'&gt;Left Span 50% width&lt;/span&gt;
    &lt;span class='right'&gt;Right Span 50% width&lt;/span&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>
<hr />
<p>Thanks for the explanation. The <code>float:left</code> works beautifully with expected results in FF 3.1. Unfortunately, in IE6 the right side span renders 50% of the 50%, in effect giving it a width of 25% of the browser window. Setting its width to 100% achieves the desired results but breaks in FF 3.1 which is in standards compliance mode and I understand that. Getting it to work both in FF and IE 6, without resorting to hacks or using multiple CSS sheets has been a challenge</p>

[{'answer_id': 34587, 'author': 'Teifion', 'author_id': 1384652, 'author_profile': 'https://Stackoverflow.com/users/1384652', 'pm_score': 3, 'selected': True, 'text': '<pre><code>float: left;\n</code></pre>\n\n<p>Try adding that to span.left</p>\n\n<p>It will cause it to float to the left (as suggested by the syntax).</p>\n\n<hr>\n\n<p>I am not a CSS expert by any means so please don\'t take this as unarguable fact but I find that when something is floated, it makes no difference to the vertical position of things below it.</p>\n\n<p>If you float the span.right to the right then add text beneath them you should get some interesting results, to stop these "interesting results" you can use "clear: left/right/both" which will cause the block with the clear styling to be under anything floated to the left/right/both. <a href="http://w3schools.com/css/pr_class_clear.asp" rel="nofollow noreferrer">W3Schools</a> have a page on this property too.</p>\n\n<p>And welcome to Stackoverflow.</p>\n'}, {'answer_id': 34853, 'author': 'rams', 'author_id': 3635, 'author_profile': 'https://Stackoverflow.com/users/3635', 'pm_score': 1, 'selected': False, 'text': '<p>I don\'t like this hack but it seems to do the job both in Firefox and IE6:</p>\n\n<pre class="lang-css prettyprint-override"><code>span.right {\n  vertical-align:top; \n  display:inline-block;\n  text-align:right;\n  height:80px;\n  width:50%;\n  *width:100%;\n  background-color:red;\n}\n</code></pre>\n\n<p>Note the <code>*width: 100%</code> which seems to satisfy IE6\'s requirement and is ignored by Firefox.</p>\n'}, {'answer_id': 16191163, 'author': 'eba', 'author_id': 1237397, 'author_profile': 'https://Stackoverflow.com/users/1237397', 'pm_score': 2, 'selected': False, 'text': "<p>This is because inline and inline-block include whitespace (in your case the line break) between the elements. In your case the combined width of the elements is 50%+50%+whitespace > 100%.</p>\n\n<p>You should either put the two elements on the same row in your HTML document (without space)</p>\n\n<pre><code>&lt;div class='header'&gt;\n    &lt;span class='left'&gt;Left Span 50% width&lt;/span&gt;&lt;span class='right'&gt;Right Span 50% width&lt;/span&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>Or use HTML comments</p>\n\n<pre><code>&lt;div class='header'&gt;\n        &lt;span class='left'&gt;Left Span 50% width&lt;/span&gt;&lt;!--\n     --&gt;&lt;span class='right'&gt;Right Span 50% width&lt;/span&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>I myself prefer the latter.</p>\n"}]
['https://Stackoverflow.com/questions/34581', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3635/']