CODEWITHSUNDEEP
htmlcss
Ray
Ray

Reputation: 6095

Negative margin is working on box, but not on contents inside of it

(Please note current answers provided are unclear)

I've got a web-site header that is in two parts: left and right, with the left 130px high, and the right side 185px high. I laid these out using float.

I've got content underneath the left header side in a div that I want to move up so it is immediately below the left header. When I give this div a border and specify a negative margin, the border moves up as expected. However, the content inside the div is not moving up. It hangs down below the 185px (apparently from the right header). Note I have the padding set to zero on this div. What am I doing wrong?

It doesn't work in recent versions of Chrome or Firefox. Thanks.

Relevant HTML code is:

<body style="margin: 0px">
    <div class="page">
        <div>
            <div class="leftHeader">
                <div class="headerMissingEnd">
                    <!-- img src="images/header.png" Title" width="750px" / -->
                </div>

            </div>
            <div class="rightHeader">
                <div style="height:185px;padding:0px">
                    <canvas margin:"0" width="360px" height="185px" loop="true" fps="30" bgcolor="#ffffff" init="fn_canvas">
                    </canvas>
                </div>
            </div>
            <br class="clear" />
        </div>
       <div style="margin-top:-60px; padding:0;border: 1px dashed red">
          some text that appears too low, not a top of div as expected
       </div>

CSS Code:

.clear {
   clear: both;
   line-height: 0px;
}

.page {
   width: 1005px;
   margin: 0px auto;
   color: #333;
   background-color: #fff;
}

.leftHeader {
    float: left;
    width: 630px; 
    margin: 0px auto;   
 }

.rightHeader {
    float: left;
    width: 360px; 
    height: 185px;
    margin: 0px auto;   
 }

.headerMissingEnd {
    margin: 0px;
    width: 640px;
    height: 130px;
   background: url('images/header-left.png') no-repeat;
}

Upvotes: 0

Views: 345

Answers (2)

Gman
Gman

Reputation: 1876

And if you want real smooth stacking without any hardcoded offsets, what you should really do is use float: right; for the headers. (The header parts will have to be switched places in the markup.)

    <div class="leftHeader">
        <div class="headerMissingEnd">
            <!-- img src="images/header.png" Title" width="750px" / -->
        </div>
    </div>

    <div style="padding:0;border: 1px dashed red;">
        some text that appears too low, not a top of div as expected some text that appears too low, not a top of div as expected some text that appears too low, not a top of div as expected
    </div>
</div>

And the css:

.clear { clear: both; line-height: 0px; }

.page {
   width: 1005px;
   margin: 0px auto;
   color: #333;
   background-color: #fff;
}

.leftHeader {
    float: right;
    width: 630px; 
    margin: 0px auto;   

    background-color: black;

    opacity: 0.5;
 }

.rightHeader {
    float: right;
    width: 375px; 
    height: 185px;
    margin: 0px auto; 

    opacity: 0.5;

    background-color: navy;
 }

.headerMissingEnd {
    margin: 0px;
    width: 640px;
    height: 130px;
   background: url('images/header-left.png') no-repeat;
}

Upvotes: 0

Gman
Gman

Reputation: 1876

Don't use negative margin to change element's relative position. Use position: relative; top: -60px; instead:

<div style="position: relative; top: -60px; padding:0;border: 1px dashed red;">
      some text that appears too low, not a top of div as expected some text that appears too low, not a top of div as expected some text that appears too low, not a top of div as expected
</div>

(http://jsfiddle.net/BMpqP/10/) Then you can fix wrapping issues with the width: 600px;.

Old answer text: So, that's because your last div is 100% in width and is not floated. (The default behavior for div.)

When the div is not floated, the text in it interacts with the floating divs even outside it. If you add more text, you'll see (http://jsfiddle.net/BMpqP/6/) that it's for the text not to clash with the other header that is higher.

My proposed solution is to float the div and set the size to it:

<div style="margin-top:-60px; padding:0;border: 1px dashed red; float: left; width: 630px;">
    some text that appears too low, not a top of div as expected
</div>

Then the text will be okay, and the main content of the page would also be fine: http://jsfiddle.net/BMpqP/7/

Upvotes: 2

Related Questions