How can I make a fluid toolbar with floating buttons in TinyMCE?

Question

I've got a basic TinyMCE setup, and I'm trying to create a "fluid" toolbar with buttons that drop down to the next line if the toolbar is too small. I've got all buttons in a single table row:

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    plugins : "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
    theme_advanced_buttons1 : "bold,italic,justifyleft,justifycenter,justifyright,justifyfull,"
        +"styleselect,formatselect,fontselect,fontsizeselect,bullist,numlist,link,unlink,image,pdw_toggle,"
        +"pastetext,pasteword,search,replace,outdent,indent,blockquote,undo,redo,code,forecolor,backcolor,"
        +"tablecontrols,hr,removeformat,visualaid,sub,sup,charmap,emotions,media,advhr,print,ltr,rtl,fullscreen,"
        +"cite,abbr,acronym,del,ins,attribs,visualchars,nonbreaking,template,blockquote,insertfile,insertimage,underline,strikethrough",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_buttons4 : "",
    theme_advanced_toolbar_location : "top",
    width: "100%",
    height: "400"
});

I have tried all kinds of CSS to achieve this, I'm not sure why this won't work:

.mceToolbar tr {
    display:block !important;
    width:100% !important;
}
.mceToolbar td {
    clear:none !important;
    display:block !important;
    float:left !important;
}

What I'm looking for is something like this (resize the output pane): http://jsfiddle.net/vKTcq/

You can experiment with my TinyMCE demo here: http://fiddle.tinymce.com/aecaab/1

I know I've done this before with CSS alone, so I'm pretty sure it's possible - I just can't seem to figure it out. Any ideas?

Answer 1

Aha, found it, the white-space property is set to nowrap on everything in the toolbar, in the default skin as well as most other skins. Use this CSS to override it:

.mceToolbar * {
    white-space: normal !important;
}
.mceToolbar tr,
.mceToolbar td {
    float:left !important;
}

I'm not sure which specific elements really need the white-space fix, but this works perfectly.

Demo: http://fiddle.tinymce.com/becaab

Example output with a smaller toolbar (the buttons will now stack instead of go off screen):