SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Methods of preventing content falling under a fixed header?

    I find that when I create a fixed header I use padding to move the content that has fallen below it back into view. I was wondering is there a method of creating the fixed header and keeping the content that proceeds it in the DOM all viewable without using padding/margin?

    Fiddle: http://jsfiddle.net/tWT6X/1

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The fixed element doesn't exist in the normal flow of the document so the only way for other elements to account for it is to use padding/ margin/ or positioning in various guises to keep clear of the fixed element.

    You could use relative positioning on the container that follows the fixed header using an em height for the value "top" equal to the height of the fixed header. Or as you mentioned earlier margins or padding would do similar also. (Or even absolutely place the whole layout below the header.)

    There is no other choice but I guess this begs the question "why do you need to find another way"?

  3. #3
    SitePoint Evangelist kyllle's Avatar
    Join Date
    Jun 2008
    Posts
    469
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks for the reply, I just thought I'd put the question out there on the off chance there may have been a way. If my fixed headers height is going to change frequently then Im going to have to control the padding/margin of my following content with js, but if there would have been a way of not having to use padding/margin then I wouldnt have to use js.

    Thanks again
    Kyle

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes that's the problem with a fixed header of variable height and js would be the only solution in that case.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •