title: Inline-block for a right side div doesn't seem to be taking effect
body: <p>I'm a newbie when it comes to CSS. I'm working with a HTML content which I would want to look like 3 columns in a single row. I've the following HTML with embedded style:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      #main {
          width: 100%;
          height: 250px;
      }
  
      #left-side {
          width: 20%;
          float: left;
          height: 100%;
      }
  
      #in-the-middle {
          width: 60%;
          text-align: center;
          display: inline-block;
          height: 100%;
      }
  
      #right-side {
          width: 20%;
          display: inline-block;
          height: 100%;
      }
  
  &lt;/style&gt;
  
  &lt;div id="main"&gt;
  
      &lt;div id="left-side" align="left"&gt;
          Hello left
      &lt;/div&gt;
      &lt;div id="in-the-middle" align="center"&gt;
          Hello center
      &lt;/div&gt;
      &lt;div id="right-side"&gt;
          Hello right
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Looks simple, but unfortunately the "Hello right" text gets displayed at the left side of the page. I have set the display for the #right-side to be inline-block, expecting it to show up adjacent to the "Hello center" div, but it doesn't seem to take effect. Can anyone see what I'm missing here?</p>