Margin, position и padding не работают, если задано display: inline. также странное поведение из относительного положения

У меня есть два класса CSS:

.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;
}

Теперь, как вы можете видеть, они оба настроены на отображение в строке (без разрывов строк между элементами). Что работает правильно. Но по какой-то причине, с тех пор, как я установил отображение inline, Padding, Positioning и Margin CSS просто перестали работать. Я могу добавить маржу слева 10 дюймов, и ничего не произойдет. То же самое с заполнением и позиционированием.

Может ли кто-нибудь объяснить, как это исправить?

Кроме того, у меня установлено относительное положение для обоих классов, но при просмотре страницы в браузере .class2 по кругам .class1 , когда он должен был быть сразу после .class1 .

Есть идеи?

РЕДАКТИРОВАТЬ :

Хорошо, я сделал JSFiddle, но, похоже, он там еще больше ...

Похоже на Ширина не работает ....

вот она:

http://jsfiddle.net/zYbwh/1/