CodingForums.com - Fixed-positioned div overlaying text when resizing window

Hello!

This is my first post on this forum and I hope I have followed all regulations and guidelines ;)

Anyway, I have a certain problem with my website.

It features one fixed div with an image in it ("Pawel Glaz" on the right). The idea was that I wanted that div to stay in place, all the time.

The problem, however, is that when user resizes the window greatly, or (which is more likely) views that page on a mobile device, that div overlaps the rest of the text. Try resizing your browser window either from right or left.

You can view the CSS code for that website here. Below I extract the part of code responsible for handling that fixed div:

#1

Code:

/************/

/*** MENU ***/

/************/



(...)



#myname

{

position: fixed;

top: 5px;

right: 15px;

z-index: 2;

width: 349px;

height: 90px;

}

What I would like to do is to set some absolute, minimum width of the page so when users resizes the window and reaches it, window will present a scrollbar but will not allow any overlay like this. I have somehow achieved it on my website with that white box where text is located. It will make a scrollbar appear as soon as you resize the browser window to that box's width and will not allow any more changes to the layout. I would like to extend that "protective bubble" to a width where my fixed divs would not screw up my layout :P

As you possibly have noticed by now, I am not a professional coder - that layout took me quite a lot of time to create so please treat me as an amateur when providing your answers. I might as well learn something new, apart from just fixing my issue :-)

Thanks in advance!