Bloc a taille variable cote a cote et redimentionnement police

boujour,

je dois créer une page web qui utilise deux blocs cote a cote.

A gauche, on a un bloc qui est en fait une image de fond, cette image doit faire plus ou moins 25% de la largeur de la page mais
aussi avoir des contraintes min-width et max-width car il s agit d un degradé avec un mot écrit dessus mais on est limité par la taille de l image.

le probleme que j ai , c est que je veux rendre le site accessible et donc prévoir le redimentionnement des polices a coup de molette.

c est actuellement possible mais en jouant de la molette, je me retrouve avec la bloc de gauche qui passe sur le bloc de droite , je pense a un probleme de float mais j ai pas trouvé de solution acceptable

voici mon css :

* {
margin:0;
padding:0;
}

body{
	font-family: Arial,"Lucida Grande", Verdana, sans-serif;
	font-size: 75%;
	line-height: 1.6;
	background:#6d6d6d;
}

#main{
width:100%;
text-align:left;
display:block;
background:#fefefe;
background-image:url(images/degra-main.jpg);
background-position:top left;
background-repeat:repeat-x;
min-height:669px;
}

#mainin{
background-image:url(images/deg-inv-bas.jpg);
background-position:bottom left;
background-repeat:repeat-x;
width:100%;
margin:0;
padding:0;
min-height:669px;
}


#mainleft{
	background:#f2f2f2;
	background-image:url(images/bg-left-home2.jpg);
	background-position:top right;
	background-repeat:no-repeat;
	width:25%;
	overflow:hidden;
	min-width:0px;
	max-width:340px;
	min-height:669px;
	float:left;
}

#maincontent{
padding-top:12px;
margin:0 0 0 25%;
padding-left:10px;
min-height:640px;
border:1px solid purple;
}

et au niveau html ca donne ca :

<div id="main">
<div id="mainin">
	<div id="mainleft">
	</div>
 <div id="maincontent">
	</div>
	</div>
</div>

avec la police a la taille "normale" c est niquel, les blocs se positionnent parfaitement en redimentionnant la fenetre et avec un paquet de résolution allant de 800*600 à 1600*xx , par contre des qu on resize la police , c est la cata..

personne n a d idée ?

Une page en ligne, peut-être, pour qu'on puisse constater le problème et tester des solutions plus facilement?

hum, en fait le probleme n est pas lié aux blocs cités mais au menu au dessus qui est centré comme ceci et quand on le texte avec la molette, il prend une ligne de plus et "pousse" le div menuleft vers la droite

#menu{
height:52px;
background-color:#6d6d6d;
width:100%;
background-image:url(../images/bg-menu.jpg);
background-repeat:repeat-x;
display:block;
}

#menucontent{
width:895px;
margin:auto;
height:52px;
padding-top:12px;
color:#7d7d7d;
}

HTML :

<div id="menu">
	<div id="menucontent">
	    <ul>
		    <li><a href="index.php" id="ea">Accueil</a></li>
			................................... more li 
.............. more li
  		</ul>
	</div>
</div>

le probleme est que je dois center le contenu du menu et j ai pas reussi a le faire bien autrement qu en fixant la width de menucontent.

Je dois mal m y prendre mais mes autres tests aboutissent toujours a un contenu aligné a gauche.. une idée ?