Reply To: [Solved] Full-Width Header Wrap

[shaneisme]

If #container is consistently the main page wrapper, you could use #container:before instead of after. You wouldn’t need the bottom: -5px though, and you might need to adjust the z-index all depending on the rest of your site.

Upon inspecting the DOM though, #container has a height of 0 because it, and all of its parents, all of no height specified – only min-height. So you could either define html and body to have a height of 100%, or just give #container a min-height of 5px (which is how tall the colored bar is).

You could also simply add a new element after body called .color-bar or something… you could even make it fixed or something like that so it’s always there if you did (just spit-balling).