Grow your CSS skills. Land your dream job.

HTML elements on the right moves when the browser is resized

  • # April 6, 2013 at 11:56 am

    I have a navigation bar positioned on the right side using.

    The container is relatively positioned and the nav bar is absolutely positioned. It is moved to teh right side by setting the right to 0.

    Please take a look at this [pen](http://codepen.io/Isuru-Nanayakkara/pen/bHgdz “”).

    The problem is when I resize the browser, that navbar moves! If I reduce the width of the browser a lot, it eventually overlaps the logo image as well.

    I want the nav bar to be fixed to the right side. How can I do that?

    # April 6, 2013 at 12:07 pm

    Absolute positioning is not the best way of doing this. Have you looked into floats?

    >The problem is when I resize the browser, that navbar moves! If I reduce the width of the browser a lot, it eventually overlaps the logo image as well.

    It’s going to do that whatever you do. Have you looked into media queries?

    # April 6, 2013 at 12:10 pm

    Ah I forgot to mention that I also used floats too but still came across the same issue.

    Is that so? I didn’t because I still haven’t properly started learning responsive design yet.

    # April 6, 2013 at 12:16 pm

    Using floats : http://codepen.io/Paulie-D/pen/iJKDq

    >Is that so? I didn’t because I still haven’t properly started learning responsive design yet.

    Yep.

    # April 6, 2013 at 12:48 pm

    Oh okay. Thanks. :)

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".