Problème de div, clear...

Bonjour,

Le problème a déjà été abordé plusieurs fois mais malgré les tuto je ne trouve pas de réponde...
J'ai suivi ce tuto et je souhaiterais faire comme l'exemple boite flottance avec spacer:
http://openweb.eu.org/IMG/article52/annexe1.html#ex3

voici mon code:

<div id="menu_left_big">
     <div id="menu_left">
          blabla
     </div>
     <div class="spacer"> </div>
</div>

#menu_left{
     border-color:transparent;
        border-width:15px 10px 15px 10px;
        -moz-border-image:url("../pictures/jaune.png") ;
        -webkit-border-image:url("../pictures/jaune.png") ;
	width: 120px;
	height: auto;
	float:left;
	position:fixed;
}
#menu_left_big{
	background-color: red;
	width:120px;
	border:3px solid blue;
	//height: auto;
}
.spacer {
  clear: both;
}

et voici ce que j'obtient:
http://imageshack.us/photo/my-images/819/divkx.png/

le div rouge (bordures bleues) devrait englober le jaune... je ne vois pas ce que j'ai fait faux.

Merci pour votre aide.
PS: ça doit fonctionner sur IE seulement