Question

Try the following sample code:

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

The weird issue is after i set div.row of the Content block to have margin-top:10px, the Title block would move down 10px from top of the browser as well. Any workaround to solve this issue?

Note: No external style sheet is loaded.

Answer 1

for parent div of title add the following css display: inline-block;

Demo: http://jsfiddle.net/HvStn/