inline-block on span

I expected the two span tags in the following sample to display next to each other, instead they display one below the other. If I set the width of the class span.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 padding/margin which makes it take more than 50%. I am trying to get this done without using html tables. Any ideas?

* {
  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;
}

<html>

<head>
  <title>Test Page</title>

</head>

<body>
  <div class='header'>
    <span class='left'>Left Span 50% width</span>
    <span class='right'>Right Span 50% width</span>
  </div>
</body>

</html>

Thanks for the explanation. The float:left 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

Solution

float: left;

Try adding that to span.left

It will cause it to float to the left (as suggested by the syntax).

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.

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. W3Schools have a page on this property too.

And welcome to Stackoverflow.