Блокс-модель Mozilla Firefox - странная проблема

Question

Попробуйте следующий пример кода:

<div style="background-color:#ddd">
<div style="width:900px; margin:0px auto">

    <div class="row">
        <div class="col" style="float:left; width:900px">
            <h1>Title</h1>
        </div>

        <div style="clear:both"></div>
    </div>
</div>
</div>


<div style="background-color:#cfc">
<div style="width:900px; margin:0px auto">

    <div class="row" style="margin-top:10px; border:1px solid #f00">
        <div class="col" style="float:left; width:900px">
            <h2>Content</h2>
        </div>

        <div style="clear:both"></div>
    </div>

</div>
</div>

<div style="background-color:#cfc;">
<div style="width:900px; margin:0px auto">

    <div class="row" style="margin-top:50px; border:1px solid #f00">
        <div class="col" style="float:left; width:900px">
            <h2>Content 2</h2>
        </div>

        <div style="clear:both"></div>
    </div>

</div>
</div>

Странная проблема заключается в том, что после того, как я установил для div.row блока Content значение margin-top: 10px, блок заголовка переместился бы вниз на 10px от вершиныбраузер также.Любой обходной путь для решения этой проблемы?

Примечание. Внешняя таблица стилей не загружена.

Answer 1

для родителя div заголовка добавить следующий css display: inline-block;

Демо: http://jsfiddle.net/HvStn/