I'm really new to this, so I hope it's not a stupid question.

The container in question has been marked with a dark-ish green background. I'm trying to get that white space above it to zero by pushing the element up, but when i target the id with CSS and set margins to zero, there seems to be no effect. Then I try to remove the margins of the header above it to zero too, and no effect. How do I push out that white space? Why is the CSS being unresponsive?

http://www.addisontaylor.com/addison/dock411_home.htm ... is the webpage, and http://www.addisontaylor.com/addison/dock411_stylesheet.css is the style sheet.

Here is what I assume are the relevant portions of the CSS.

html {
background: #ffffff url(banner.png) repeat-x;
}
body {
font-size: 90%;
width: 800px;
margin-left: auto;
margin-right: auto;

#header {
height: 120px;
margin-bottom: 0;
}
#main {
background-color: green;
margin: 0;
}
margin-top: 0;

I would post the html markup, but I think it would look neater if you just viewed it on the link, as it's kind of lengthy, and very generic anyway. The div that houses the green section is ided "main", and that's really about it. the header is it's own div and the side bar as well, and all are direct descendants of the body element.

Please help me. Thank you.

  • You guys are amazing. Dansid Altroyo about 7 years ago
  • If you want a margin on the first element in the container, you have to un-collapse it - padding or border on the container will do it. if you don't need a margin on the first element, or you can margin the container to the same effect the other answers here will work for you too. Tony Crockford about 7 years ago

3 answers

1
point

You're encountering margin collapse. Margins on items inside a container can poke outside the container.

try this:

#main {
background-color: green;
margin: 0;
padding: 1px 0 0 0;
}

and read all about why here:

http://www.complexspiral.com/publications/uncollapsing-margins/

Answered about 7 years ago by Tony Crockford
0
points

It seems that the culprit is the first paragraph in the #main. There is margin in the paragraph which is overlapping in the div. Try adding a class to that paragraph (pclass for example) then add this code to your css file:

.pclass{margin:0;padding-top:10px;}

I hope that helps.

I have a "reset" css file that I include in all of my css to get rid of margins, padding, line height etc that are inconsistent across the browsers. This saves a lot of time and headaches. You may want to look into it. Try this.

Answered about 7 years ago by TailorDMI
danwellman 5600
0
points

The first <p> element inside the #main <div> has margin-top on it (added by default by the browser), which is pushing its container down and creating the white gap.

To fix it, remove the margin-top from either just the first <p> (give it a class of 'first' or similar) or all <p> elements with a general element selector such as:

p { margin-top:0; }

To move the first <p> element back down, set the padding-top on the #main div:

#main { padding-top:10px; }

This will then fix the issue :)

The top and bottom margins are applied to the elements by default because they are block-level elements. I mention removing margin-top from all <p> elements because this will make it easier to control flow/spacing throughout the document

Answered about 7 years ago by danwellman