If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Fixed-positioned div overlaying text when resizing window

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:

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 :-)