Div content moves the div

HTML & CSS
1

Hi, I’m still quite a beginner in css. I’m trying to re-design my pages with css and so far so good, but now I get to the point where I’m adding content and the content appears to move the containing div downwards for some reason and I don’t know what is doing it. Here is what I have.



html, body {
	       font: 0.8em Verdana, Arial, Helvetica, sans-serif;
	       color: #999999;
	       background:#fff;
	       margin: 0;
	       height:100%;
}

#container {
                width: 850px;
                height: 100%;
                margin: 0px auto;
                background-color: #fff;
} 

#banner { 
            position:relative; 
	    width:850px; 
	    background:url(images/banner.gif); 
            font: 12px Verdana, Arial, Helvetica, sans-serif #000; 
	    height:80px; 
}



<div id="container">
  <div id="banner">
    <h1>Home</h1>
  </div>
</div>
2

Hi Buddy, Welcome to SitePoint! :slight_smile:

It looks like you have collapsing margins, it is something that everyone new to CSS struggles with.

You need to force the #banner div to un-collapse all child margins. You could set margin:0; on the h1 but that is not productive since there are times when you actually do want a top margin. It’s best just to fix it at the source of the problem which is the parent allowing it’s child margins to collapse.

What happens is that the parent (banner) collapses it’s background and it makes it appear to have shifted down.

To fix it you can set a 1px top padding on it or go into overflow mode (which is what I usually do). Unless you know what the relative positioning is doing on banner let’s remove it for now also.


#banner { 
   [COLOR=Red] /*position:relative; */[/COLOR]
    width:850px; 
    background:url(images/banner.gif); 
    font: 12px Verdana, Arial, Helvetica, sans-serif #000; 
    height:80px; 
   [COLOR=Blue] overflow:hidden;[/COLOR][B]/*un-collapse child margins*/[/B]
}

That should work for you. I would also make the height:100% on your #container min-height:100%; so the page can expand with the content. :wink:

3

Hi,

That solution worked a treat. I’m going to have a good read of that link about collapsing margins now.

Thanks for the welcome and the replies :slight_smile:

4

Do you mean that it moves the top of the container down, or that it stretches it down? If it moves the top, try adding h1 {margin-top:0;}.