请教一个工具栏显示的问题！

Question

 <form id="form1" runat="server">        
<div id="divToolBar" class="topBar">
            <div class="toolBar">
                <button runat="server" style="width: 58px" type="button" class="toolBarBtn" id="btnBrowse"
                    onclick="btnBrowseClicked()">
                    <img align="absMiddle" src="../../../Admin_Images/browse.gif" />&nbsp;查看</button>
                <button runat="server" style="width: 58px" type="button" class="toolBarBtn" id="btnDownload"
                    onclick="btnDownloadClicked()">
                    <img align="absMiddle" src="../../../Admin_Images/down.gif" />&nbsp;下载</button>
                 .....此处还有很多button
            </div>
        </div>
        <div id="divMain" class="crossMainArea">
                ......
        </div>
 </form>现在问题是：一旦toolbar中button过多，则会分2行显示，这样很不美观，我想实现的是判断一下，如果divToolBar长度小于当前页面宽，则在工具栏左右各显示一个按钮，点击后可以实现工具栏的左右移动。请问以上效果如何实现