title: Margin, position and padding not working when display:inline is set. also weird behaviour from relative position
body: <p>I have two CSS classes:</p>
  
  <pre><code>.class1 {
      height: 100%;
      width: 300px;
      border: 1px none #B0B0B0;
      position: relative;
      display: inline;
      left: 10px;
  }
  .class2 {
      height: 100%;
      width: 200px;
      position: relative;
      display: inline;
      margin-left: 15px;
      background-color: #00CCCC;
      border-top-width: 1px;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-top-style: solid;
      border-right-style: solid;
      border-bottom-style: solid;
      border-left-style: solid;
  }
  </code></pre>
  
  <p>Now, as you can see, they're both set to display in a line (no line breaks in between elements). Which works correctly. But for some reason, ever since I set the display to inline, the Padding, the Positioning and the Margin CSS have all just stopped working. I can add a margin-left 10inches and nothing will happen. Same with padding and positioning.</p>
  
  <p>Can anyone explain how to fix this?</p>
  
  <p>Also, I have the relative position set on both classes, yet when viewing the page in a browser, <code>.class2</code> over laps <code>.class1</code> when its supposed to be just after <code>.class1</code>.</p>
  
  <p>Any ideas?</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>Okay, so I've done a JSFiddle, but it seems to be playing up even more there....</p>
  
  <p>Looks like the <code>Width</code> is not working....</p>
  
  <p>here it is:</p>
  
  <p><a href="http://jsfiddle.net/zYbwh/1/" rel="noreferrer">http://jsfiddle.net/zYbwh/1/</a></p>