Member Avatar for K?!

Hi all

I want a header to stick to the top of the browser window and left and right to it. (pretty standard, right?)

I have configured the following things for this: (never mind the colors, those ar just for testing purpose.)

body {
margin: 0;
padding: 0;
border: 0;

background: black;
}

#header {
background: red;

height: 80px;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}

But Firefox, IE and Chrome are STILL displaying space between the top of the browser window and the header div. (haven't tested other browsers yet)

Any help?
Thanks in advance
Greetings, K?!

Ps: sorry if this question has already been asked.

  • 4 Contributors
  • 8 Replies
  • 113 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by xigmapro

Dani AI

Generated

Most likely cause: collapsing margins. The top margin of the first block inside your header (for example an h1 or p) can "collapse" out of its parent and create that visible gap even when you set margin: 0 on body and the header itself. 's global reset masks this by removing those defaults; 's note about the root element is related, but margin-collapsing is the clearer explanation. See for details.

Quick diagnosis: open the browser inspector and check the computed box model for the header and its first child. The inspector highlights margin areas so it's easy to spot which element's margin is creating the gap. For a fast test, temporarily remove the top margin on the header's first child (targeted, not global):

#header h1 { margin-top: 0; }   /* quick check — target the element that actually has the default margin */

Safer fixes (pick one that fits the project):

  • Target the offending element(s): zero the heading/paragraph top margin inside the header only. This is the least invasive for CMS-managed content.
  • Prevent margin collapse by making the header establish a new block formatting context:
#header { overflow: auto; }         /* simple, widely supported */
#header { display: flow-root; }    /* modern alternative */
#header { border-top: 1px solid transparent; } /* visual-free way to stop collapse */
  • If the header must stay fixed at the viewport top, use position: fixed; top: 0; but remember it will sit above content — add body padding equal to the header height and watch mobile behavior:
#header { position: fixed; top: 0; left: 0; right: 0; height: 80px; }
body { padding-top: 80px; }

Prefer targeted resets or a small normalizing stylesheet for cross-browser consistency rather than a global * reset when building CMS-driven sites. Also ensure a standards-mode DOCTYPE so browsers use consistent layout rules. For deeper reading on creating a BFC and layout effects, see Block formatting context.

Recommended Answers

All 8 Replies

Member Avatar for Elbudster

The styles you included worked for me. DIV's by nature, unless explicitly told otherwise, will fill 100% of the width of its parent element, so you don't have to specify that. Can paste this in a new html file and it should work. Basically all the styles are yours yet, I just condensed them a little.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>CSS Example</title>
<style type="text/css">
* { padding: 0; margin: 0; }

body {
	background: black;
}

#header {
	background: red;
	height: 80px;
}
</style>
</head>
<body>

<div id="header"></div>

</body>
</html>
Member Avatar for K?!

I was like "ok, it certainly doesn't do it for me", but it's the

* { padding: 0; margin: 0; }

in the CSS that does the trick.

I am in doubt whether to use this or not. It does the trick indeed, but on the other hand, EVERY margin and padding I need will have to be defined. So when a in the css undefined component pops up, it will have no margin or padding, and that's not really good.

I was wondering if fixed positioning at top 0 is a safe solution?

Member Avatar for K?!

I had the margin and padding of the html and the body element set to 0, I would really like to know which element it is that is still preserving a space between the header and the top of the browser window.
If I know that, I can set that specific element's margin and padding to 0, without removing all the other margins and paddings.

Member Avatar for Elbudster

I copied/pasted your CSS code directly and it worked for me, even before I added the * declaration. Does your file include a DTD? I've had some browsers not want to apply styles correctly without one.

As far as

* { padding: 0; margin: 0; }

goes...

I use it in almost every project I do. Yes you have to explicitly set the padding and margin of elements you want to use, but the amount of padding/margin that browsers apply by default varies... so this achieves somewhat of the effect that reset style sheets are used for in order to achieve a more consistent look between browsers.

Member Avatar for K?!

Yes, I know it's kind of interesting, but the problem is that 1: I'm pretty new, and 2: I'm making a website for someone to manage with a CMS, so I might overlook an element he might use lateron, and then it will have no margin or padding. So indeed it will vary in different browsers, but at least it will be there.

Member Avatar for Troy III

Since years now, html element is a part of the document layout. You are seing the gap padding of the html now

you dont need the * selctor of course, its tricky and will cause much trouble as you develop further, jus try to add to it display: block and see what happens with fx sf and op render ...

the proper way to remove that padding safetly in all browsers is to use html, body{...} selector.

Edited by Troy III because: n/a
Member Avatar for K?!

Ok, thank you.

Member Avatar for xigmapro

I want to solve your problem by discussing mu client. May be she solve it. Thanks.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.