Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Two Fixed Divs Overlap

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #39792
    marisk28
    Member

    Hello Community!!

    If anyone could solve this I’d really appreciate it!!!

    Added a Fiddle for now: http://jsfiddle.net/dTpJC/

    I have two fixed divs, one dark grey(#arc-admin) and one light grey. I would like to have one on top of the other (with dark grey div on top) and have them fixed as the user scrolls down the page.

    Currently I have this: http://grab.by/g1b8

    The dark grey overlaps the light gray div (both fixed). Is there any way I can make the dark grey div clear the light grey div?

    Thanks so much, this problem is driving me crazy!!

    #109848
    marisk28
    Member

    Note: the divs in question appear at the top of the page.

    #109852

    I don’t see a light grey element? I’m also not entirely sure exactly what you are after.

    #109853
    marisk28
    Member

    Sorry about that, hopefully this will clarify.

    I currently have this: http://i.minus.com/ibbzwxpDON47Bx.jpg

    and I would like to get this: http://i.minus.com/i7tXV6IetwSRo.jpg

    The dark gray bar (in front aka 1) covers the lighter gray bar (2). I need #1 to push #2 down. Both bars will stay fixed, at the top as the user scrolls down the page.

    #109860

    Right, so that’s a little tricky due to the use of position: fixed; (it removes elements from the flow of the document, so they technically can’t “push each other down”). With that being said, we can make use of CSS selectors to get the behavior you want. The following code will push #arc-header-top down, but only if #arc-admin is present:

    #arc-admin + #arc-header > #arc-header-top {
    top: 31px;
    }

    The other thing to keep in mind is that now you are covering up part of the header, so you might want to use this also:

    #arc-admin + #arc-header {
    padding-top: 31px;
    }
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.