How to remove gap between header and container div in HTML5 Boilerplate

Question

I'm keen to use Paul Irish's HTML5 boilerplate but I've encountered a css problem.

I want the header to be flush at the top of the page but I can't the container div adds a gap that I'm unable to get rid of.

I think this has something to do with the clearfix for the footer. I've tried experimenting with different padding sizes for the footer and container div but to no avail.

This is the html code:

<header>
  <p> header content </p>
</header>

<div id="main" role="main">

</div>
<footer>
  <p> footer content </p>
</footer>

My custom CSS:

#container {
    background-color:orange;
    padding:1px; /* can't be zero */
    margin:0; 
}

footer {
    margin: 1px 0;
}

body {
    width:960px;
    margin:0 auto;
    background:blue;
    padding:0;
}

score 5 · Accepted Answer · answered Sep 18 '11 at 12:38

5

@techjacker; may be you have to write like this:

 header{display:block}
    p{margin:0;padding:0}

answered Sep 18 '11 at 12:38

sandeep

91,313
23
137
155

thanks Sandeep, the p css did the trick. The weird thing is that header is already set to display block by html5 boilerplate's default css so surely this p margin should extend the height of header to the top of the page? – techjacker Sep 26 '11 at 19:36
This is because of margin collapsing, margin of p would be reflected to that of header and above. – Divya Manian Oct 10 '11 at 21:29
for me it worked without setting header to display block, it's already set by the CSS reset – Robert Niestroj Apr 07 '12 at 10:46

score 1 · Answer 2 · answered Aug 09 '15 at 17:37

1

This sometimes help:

Set margins, and padding to 0.
And make sure that encoding is set to: UTF-8 without BOM.

answered Aug 09 '15 at 17:37

Kerim Tim.

1,159
12
13

How to remove gap between header and container div in HTML5 Boilerplate

2 Answers2