Content appearing behind fixed header

html header position fixed
adeniyi makinde picture adeniyi makinde · Jun 20, 2012 · Viewed 13.2k times · Source

I fixed the header section of a website, but the first div of the page appears behind the header; instead of starting from the end of the header.

Answer

Zoltan Toth picture Zoltan Toth · Jun 21, 2012

When you apply position: fixed or position: absolute the element is being removed from the document flow, so the elements that come after treat it as a non-existent. That's why your div jumps up. To fix that apply a margin-top that equals to your header height - http://jsfiddle.net/2xjES/

Related questions

HTML5 best practices; section/header/aside/article elements

There is enough information about HTML5 on the web (and also on stackoverflow), but now I'm curious about the "best practices". Tags like section/headers/article are new, and everyone has different opinions about when/where you should use these …

Read More
HTML/CSS--Creating a banner/header

I've got a horizontal image as a GIF and JPG. It is something I made with Paint--a text logo with an image on a solid background. I am having a lot of trouble trying to get it to display as …

Read More
Removing newline after <h1> tags?

I am having a problem with removing linebreaks after the <h1> tag, as everytime it prints, it adds a line break straight after it, so something like <h1>Hello World!</h1> <h2>…

Read More