HTML elements on the right moves when the browser is resized

[isuru]

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?

[Paulie_D]

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?

[isuru]

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.

[Paulie_D]

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.

[isuru]

Oh okay. Thanks. :)

[Author]

Posts