Conflit Javascript et 960 grid

Bonjour à tous,

Je rencontre le problème suivant qui est assez surprenant. J'utilise un script pour afficher et masquer 3 div (.section) correspondant chacune à une rubrique.
Ces 3 div contiennent elle mêmes d'autres div avec comme attribut float:left.

Lorsque que je laisse cet attribut float:left à toutes les div de ma div .section, le script ne fonctionne pas correctement. Par contre lorsque j'enlève l'attribut float:left, mon script fonctionne parfaitement.

J'utilise jquery, le script est le suivant :

$(function(){
	var trigger = "";
	var old_trigger = "";
	var screen_div = $("#screen_menu");
	screen_div.hide();
	$(".section").hide();

	$("#presentation").click(toggleScreen);
	$("#services").click(toggleScreen);
	$("#contact").click(toggleScreen);
	function toggleScreen(ev)
	{
		trigger = $(this).attr("id");
		if ($("#screen_menu:visible").length>0)
		{
			if (trigger==old_trigger)
				screen_div.slideUp();
			else fadoutSection();
		}
		else
		{
			$(".section").hide();
			screen_div.slideDown(function() { fadinSection(); });
			
		}
		ev.preventDefault();
		return false;
	}

	function fadoutSection()
	{
		if (old_trigger!="")
		{
			if (old_trigger=="presentation")
				$("#section-1").fadeOut("slow",function() { fadinSection(); });
			else if (old_trigger=="services")
				$("#section-2").fadeOut("slow",function() { fadinSection(); });
			else if (old_trigger=="contact")
				$("#section-3").fadeOut("slow",function() { fadinSection(); });
		}
	}
	function fadinSection()
	{
		if (trigger=="presentation")
			$("#section-1").fadeIn("slow", function() { old_trigger = trigger; });
		else if (trigger=="services")
			$("#section-2").fadeIn("slow", function() { old_trigger = trigger; });
		else if (trigger=="contact")
			$("#section-3").fadeIn("slow", function() { old_trigger = trigger; });
	}
});

le code html est le suivant :
le menu :

      <ul class="prefix_3">
        <li id="presentation"><a href="#section-1" title="Pr&eacute;sentation de Whe"><img src="images/gif.gif" alt="We print on" width="249" height="38" /></a></li>
        <li id="services"><a href="#section-2" title="Tarifs des s&eacute;rigraphies"><img src="images/gif.gif" alt="We print on" width="202" height="38" /></a></li>
        <li id="contact"><a href="#section-3" title="Nous contacter"><img src="images/gif.gif" alt="We print on" width="202" height="38" /></a></li>
      </ul>

la rubrique :

      <div id="section-1" class="grid_12 alpha section">
        <div class="picture grid_5"></div>
        <div class="grid_7 alpha omega"></div>
      </div>

Merci de votre aide.