Full Browser overlapping issues

Hey. I’m building a photo gallery site for a client, and I’m using a full browser layout. I’m just the web developer on this project, not the designer… anyways:

The issue I’ve run into is how do you keep the floating objects from overlapping eachother in a liquid layout/full browser site when the browser window size gets small enough that the elements are overlapping?

I know there is a way to restrict the browser window size with javascript, but that seems a little heavy handed…

Here’s a preview of the site so that you can see the problem:

http://www.efcmusic.com/ciar/ciar.html

here’s the code I’m using for my full browser liquid layout:

// ***Stage aligned top left
Stage.align = "TL";
// *** Stop the stage from scaling with the browser window.
Stage.scaleMode = "noScale";
stop ();
// initiate postitions and scaling values for objects

logo._x = Stage.width - 115.5
logo._y = Stage.height - 101.6

menu._x = 250
menu._y = Stage.height/6

welcome._x = Stage.width/2 - 87.5
welcome._y = Stage.height/6

contentarea._x = Stage.width/2 - 200
contentarea._y = Stage.height/6
// end initial position setting


//create a listner that checks to see if the browser window is resized
sizeListener = new Object();
sizeListener.onResize = function() {
    // change movieclip properties when the window is resized

    logo._x = Stage.width - 115.5
    logo._y = Stage.height - 101.6
    
    menu._x = 250
    menu._y = Stage.height/6
    
    welcome._x = Stage.width/2 - 87.5
    welcome._y = Stage.height/6
    
    contentarea._x = Stage.width/2 - 200
    contentarea._y = Stage.height/6
};
Stage.addListener(sizeListener);