inline-block on span

Question

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? TIA

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


    
     Left Span 50% width
     Right Span 50% width
    

Answer 1

float: left;

Try adding that to span.left

It will cause it to float to the left (as suggested by the syntax), for more information on floating in CSS, I suggest W3Schools

Answer 2

Thanks for the quick answer

adding float:left did make the 2 spans render next to one another. However I dont understand why the span gets pushed down without the float. What pushes it?

Answer 3

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.

Answer 4

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

Answer 5

I don't like this hack but it seems to do the job both in FF and IE6

span.right { vertical-align:top; display:inline-block; text-align:right; height:80px; width:50%; *width:100%; background-color:red; }

Note the *width: 100% which seems to satisfy IE6's requirement and FF ignores it