Grow your CSS skills. Land your dream job.

Multiple fixed sidebar issue

  • # November 9, 2012 at 6:11 am

    I cannot seem to get two floating social media link lists to stay fixed in fixed position on opposite sides of the page at the same time. If I set them both to fixed or absolute position, they just overlap each other on one side of the page, only when I code one to relative or float position (while the other is coded for fixed) will they separate to opposite sides of the page even though they are coded to sit on opposite sides. The goal is to have them on opposite sides of the page and set to a fixed position so they hold stay put in your viewing area while you scroll up in down on the page. Currently the left side is in the correct fixed position, the other one is set to relative to stay on the opposite side of the page. Perhaps some one else has run into a similar situation and has a resolve.

    Here is the link… http://www.gamesforconsciousness.com/

    Thanks in advance for any advice!

    adr
    # November 9, 2012 at 6:47 am

    The ul #socialbar1 has a position of “float”, which is not a valid position, rather than fixed.

    # November 9, 2012 at 6:50 am

    Here you go: http://codepen.io/anon/pen/GDpbF

    Basically they don’t need to float at all.

    # November 9, 2012 at 4:18 pm

    Thanks, yeah I just replaced “float:left;” with “left:0;” , same for the right sidebar and voila, they are both fixed in their correct position on the opposite sides of the page at the same time :)

    # November 9, 2012 at 4:36 pm

    Oh Yeah, I also had to change the id of the side bars and each css style for them from “sidebar and sidebar1″ to “left-sidebar and right-sidebar”, this was necessary!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".