How to make elements NOT to affect each other

[daniels67290199]

Hey, I've got a very beginner question. I hope someone can help me with that, it drives me crazy. Let me explain it at first, an example on my website is given further below. I created two rectangle one below the other. In the upper rectangle I created a menu on the right side and in the other rectangle I added an image. It is a fluid design and every element is responsive in width and height, expect for my menu (it is greyed out for whatever reason [can some tell my why?]). Browser fill is pink. Now when I grab my browser and shrink it in width I get to a point where my menu is blocking my image and it will be pushed downwards which leads to a gap between my elements and you can clearly see my browser fill. What I want is that my menu (or any other element) does not affect any other element. I want it to float above any other elements. Working with layers does not work. I know there is a way to avoid that problem by creating breakpoints and optimize sizes but I rather would like to know how to do it correctly. I'm sure there is such a feature. Here is my website, try it for yourself: www.blasehasex.com

Thanks for any help!

[Ussnorway]

daniels67290199  wrote

I rather would like to know how to do it correctly. I'm sure there is such a feature. Here is my website, try it for yourself: www.blasehasex.com

there is no correct anwser and your site has other codes but I can recommend some points;

• set the top bar to responsive width only... that will fix the menu poping out of it

• a fixed menu that doesn't adjust should be pin [to browser] on the right hand side... the min page width in my example is 320 so that is what you design for i.e, a 300 point menu fits with 20 points to spare. Note that I placed a guide at 10 points in from the right of my design page and then butted the menu up to that.

• your image has a few options but I would start with a frame the exact same size then set it to "scale to fit" from the top left... that should play nice in every browser

example demo = dragon