0

I have two divs, one inside of the other:

<div id="main_content">
    <div id="page_title">
        <h1>This is the title of the page</h1>
    </div>
    Halo halo halo
</div>

And the CSS:

/****** MAIN ******/
#main_content {
    position: relative;
    top: -60px;
    z-index: 1;
    background-color: #FFFFFF;
    width: 1248px;
    margin: 0 auto;
}
/****** END OF: MAIN ******/

/****** PAGE TITLE ******/
#page_title {
    position: relative;
    margin-top: 100px;
    background: red url("img.png") no-repeat 50% 50%;
    height: 20px;
    width: 1300px;
}

The problem is that when I add the "margin-top: 100px;" to the #page_title (the inner div), it "pushes down" the outer div as well by 100 px, so I can see the body color under it. I would like to keep the outer div as it is = like it had no margin at all. How can I achieve this? I found that overflow:auto should solve this (it kinda does) but it puts the outer div lower than it would normally be. Is there some other way? Thanks a lot!

Fygo
  • 4,555
  • 6
  • 33
  • 47
  • 1
    This phenomenon is called *margin collapse*. – cimmanon May 21 '13 at 19:01
  • 1
    It is not clear what you are trying to do. For example, why set height to 20px for the page title? Is the text supposed to be within the red background? And why set the top: -60px in the main_content? Can you post an image of what you are trying to do? – Marc Audet May 21 '13 at 19:09
  • another to do it is by using `flex-boxes`like so `#main_content {display: flex; height: auto; flex-direction: column; flex-wrap: wrap;` – kunz May 07 '16 at 07:04

1 Answers1

3

Replacing margin-top on the inner with padding-top on the outer will fix it. As will putting overflow:hidden or overflow:auto on the outer although those might cause unnecessary clipping or scroll bars.

Matt Berkowitz
  • 975
  • 6
  • 13
  • This is it! I indeed didn't want to use overflow:auto as this would 'cut' the inner clip (that one was wider than the outer and it needs to stay in that way) Thank you very much! – Fygo May 21 '13 at 22:20