Scrollbar horizontale mais pas verticale dans un div

bonjour a tous
j'ai créé un editeur wysywig en javascript maintenant je voudrais le rendre plus presentable je lui donne un aspect office2007

donc avec des variables tableaux que j'injecte dans la fonction init je créé des div dans le div principal (jusque la ca va )

je les dimentionne en fonction de chaque variable tableaux representant les boutons (jusque la ca va )

je les met en float left pour qu'il s'alignent (jusque la ca va )
un petit soucis
le div principal est dimentionné a 99% du document (il se redimentionne en fonction de la fenetre )

malheureusement si je reduit les div "toolbar" se placent en dessous ce que je ne veut pas

je voudrais qu'il restent ou ils sont mais que la scroll horizontale du div principal apparaisse et j'avoue que je suis perdu

si quelqu'un vieut bien m'éclairer j'en serais ravi
voici mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype html>
<html lang="fr">
 <head>
  <meta http-equiv="X-UA-Compatible" content="IE=10" />
                <!-meta charset="UTF-8"-!>
<script>
function init(toolbar){
var  ruban=document.getElementById("ruban");
ruban.style.width="99%";
ruban.style.height="95px";
ruban.style.border="1px solid blue";
ruban.style.display="block";
ruban.style.overflow = "auto";
ruban.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA/oAAABhCAYAAABmr9q8AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4AERAjAjcfA7hwAAAxxJREFUeNrt3TFKHjAYgOFEAgXBgg69/xEcHR0cnNyKlDqWnsBJ5I+nEMLL8xzh217yJZl77z0AAACAhPX4ZggAAACQCf2X13+mAAAAABHz7/93q/sAAAAQsVQ+AAAAhEJ/eIsPAAAAOqF/0fkAAADQCf0h9AEAAKAT+lvpAwAAQCj0dT4AAACEQt8MAAAAoBP6Xt0HAACAUOjLfAAAABD6AAAAwImh79F9AAAACIX+dkcfAAAAQqFvBgAAABAKfaUPAAAAGVdGAAAAAB3u6AMAAEAp9D8+L6YAAAAAldB3ng8AAAAd7ugDAACA0AcAAACEPgAAAPCt1nRJHwAAADqhr/MBAACgw+o+AAAACH0AAADgRGtMQwAAAIBM6Ot8AAAA6LC6DwAAAEIfAAAAOJHVfQAAAEiF/pT6AAAAUGF1HwAAAIQ+AAAAcKI1bO4DAABAJ/R1PgAAAIRC34k+AAAAdLijDwAAAEIfAAAAOJE7+gAAABDiRB8AAACEPgAAAHCiNe3uAwAAQCf0fa8HAAAAHVb3AQAAIGQNR/oAAADQCX2ZDwAAAKHQH17jAwAAgAx39AEAACDE6j4AAACUQt9bfAAAACD0AQAAgAO5ow8AAAAh7ugDAACA0AcAAABOZHUfAAAAhD4AAABwojWn5X0AAACocKIPAAAAIWs40AcAAIBQ6Ct9AAAA6IS+zAcAAIBQ6DvQBwAAgA6P8QEAAECI1X0AAAAohb7H+AAAAKAU+jofAAAAOqE/hT4AAAB0Qt/qPgAAAIRCfzrSBwAAgFLoGwIAAAB0Qt/qPgAAAIRCX+cDAABAJ/SH0gcAAIBO6HuMDwAAAFKhbwgAAAAQCn2lDwAAAJnQH1dCHwAAADKh73s9AAAAKIW+zgcAAIBS6Ct9AAAAyIT+sLoPAAAAndB3og8AAACp0DcEAAAAyIS+zX0AAAAIhb7OBwAAgFDoe4wPAAAAQqG/LoYAAAAAmdD/88MQAAAAIBP6v++fTAEAAAAqoX9798sUAAAAoBL61zc/TQEAAAAqof/w9GwKAAAAEDH33tsYAAAAoOELorE3EVkYy5IAAAAASUVORK5CYIIA')";
  for (var i = 0; i < toolbar.length; i++) 
   {                      
var large=Math.round((toolbar[i].length-1)/2)*30+20;
 
var cmb=document.createElement("div");
   cmb.id="toolbar"+i;
   cmb.style.width=large+"px";
                        cmb.style.height="89px";
                        cmb.style.border="0.5pt solid #A9BCF5";
                        cmb.style.marginLeft = "2px";
                        cmb.style.borderRadius = "5px";
                        cmb.style.cssFloat = "left";
                        cmb.style.top="2px";
                        cmb.style.marginTop = "2px";
 
cmb.style.backgroundImage = "url('data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAABaCAYAAADEvWrIAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH4AESDwYBN+HXqwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAEKUlEQVR42u2cu3LbMBBFcTn7//+Sj0idLmU6j1PkMYln4sRj+6YQRQHU4kFqZVPEorAlUaaFw7tPAsL9z38kGdSB8XfmcMu44E/ffWB6gGhCzL5RnsiQY3nTJCyhRoCoHh9h3t19zcNEUK4IOqKNEAJHYWLEoCnzcAzff/+tsmTMTQW8V5YIgTxMGTmYmLyAPDy+XqCvHpQ5aXL8yTOpHR/JC5kyQQZbh2Z+ECbHx3NlMnrf4ZiQTFmyArMnM1fMmoU5C5kGF0J3kBPLSmTbH8zy8xTmmQ+EauvsNHPigjkLG9GfzBxNku/XzJUIlTPz+Np0wHKhmVML4SictDdlLvKZjanR8U1UXtu1z2TxednMM+WOFsPdzKeKc6WZw828PZo3RjWP5rNsMoQgzfkicJ5nYeYRdsY2NlqGnPFiOiZ/nl7yEBqaw0eHjOike6GKIwCcKxPxi4h8JmtNuAZz3mNkj4Uy95nxfI/Hh3N4UJ4h9DmW3bcZgg+z4TANh2CB2EPnxl6FaecxHLabufvMjfrM4E7TbP5SfG9cALBTiEzrbxQ4SamkRmgugHba5UjaEtlg7AHoKj4z6C3glHzn0pyV2FmYAxpQofMIVJ0/lKT9uNpr5ivYq+M8Ltwi9X7ujHUKk5lbvW7lC8rJNhX7qLCQgPxirSm3ogOcHrKWZ6JyDvTd7IDmCdU8E7NXleeEU8ysZ0uOiepwfawPQB5/bHoeAyp/iOC30xqtvK0277XRsdDKRzOHV5MWlaUA9RZcr7EJIb8MWOMk6Rohqpo+W8PZi5mDIxI00ZQzDTKTtbvTrLKQdMmV3ugA3dBPC4Xy0hzLScxQQikn0SnKGRslAkU+8xSBmFFx2s/sJyxR2YgaCrt6JZXubE07oHRKOjJ3RT/F2xZx1yi7C6jUNdqxYOO08SyYI5caVRhwabGK3Qqz3hxu2Qfkwbwxz0QOGupC2/H+gFOsQJvxCQwuXk+pfT0AuZXb1ObpTovZngn23XqP94uWdpMcGQpuqL+2ZkdcaX7WO+wSmOtODnM9rAGzLo+0PZ8k8oXt5K+W+Flda+OPLtXFh5vMVYxowtrMiSteelv5relclYVpbOaXC5MuzMln3o4w7f+X8fkuroA8/iQ+83o+xL4iscVpvbxc0jb8xu2c27ZzuZjlG9r51lfjSbr2cAOftlCFbb3wTZL2LXzY4gXltkOQDMA7GOzKIION+8ynZ75PnrPtLGwdzB8Pz+FWxppvqEFBfdYVn2BruyfNA9DbBTQJwzD9T+2bCGsuB4W7bsXKMAdtGLJMFn++t/T1CEHC6+v6KxWv/qDRlb/V1IjTtxT6MDJzh2AH05VpWU46TTOYjtISJn1fipu5m/neo7lbuWVq5No0g/nl/ptTsKrPfz2+uDStlPlp8HrSDObnDx+dgtH4D5A/ztamX7SmAAAAAElFTkSuQmCCAA==')"
ruban.appendChild(cmb);  
}
 
 
}
 
</script>
<style>
</style>
</head>
<body>
<div id="ruban"></div>
<div id ="editeur" conteneditable="true"></div>
<script>
var toolbar1=["outil Texte","bold","italic","strike","justifyleft","justifycenter","justifyright","justifyfull","forcolor","backcolor"]
var toolbar2=["Insertion","orderedlist","unorderedlist"," marquee","link","unlink","div","smiley"]
var toolbar3=["Outils Application","copy","cut","paste","codehtml","save","appercu","print"]
var toolbar=[toolbar1,toolbar2,toolbar3]
init(toolbar)
</script>
</body>
</html>