Manage window redimension

I'm currently developing a toolbar, but i'm having a problem with something. Well the think is that if my window is on full screen everything is ok, but when the windows is redimensioned, then my buttons go on the bottom line of my toolbar...

Something important is that my toolbar have a height of 20px. So normally button can't go farther then 20px

Somebody know how i can fix this bug ?

yourToolbar Code:

CSS Code :

.yourToolbarBody
{
    height: 20px;
    -webkit-user-select: none;
}

body
{
    /* This step is to escape all the top css style from body webpage */
    position: fixed;
    width: 100%;
    height: 100%;

    /* Then reset it to relative to show the scrollbar */
    position:relative;
}

a
{
    margin-left: 4px;
    float: left;
}

.button
{   
    position:relative;
    float: left;

    top: -3px;

    border-radius: 3px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    border-width: thin;
    padding-bottom: 2px;
    padding-top: 2px;

    display: inline-block;
    outline: none;
    cursor: pointer;
    text-shadow: 0 1px 1px rgba(0,0,0,.5);

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    color: #000;
    border: solid 1px #000;
}

button label
{
    vertical-align: super;  
    cursor: pointer;
}

#clear
{
    clear: both;
    display: none;
}

#closeButton 
{
    float: right;
}

#closeButton a 
{
    padding-left: 30px;
    background-image: url(../images/close.png);
    background-repeat: no-repeat;
}

#dropMenu
{
    top: 39px;
    left: 0;
    overflow: hidden;
    /*background-color: #E5E5E5;*/
    margin: 0;
    padding: 0;
    position: fixed; !To do not move the toolbar when scrolling
    border: none;
    /*-webkit-box-sizing: content-box;*/
    z-index: 99999999;
    border-radius: 0 0 6px 6px;

    background: #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#E5E5E5));
    background: -moz-linear-gradient(top, #ffffff, #E5E5E5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#E5E5E5");
}

.dropMenuButton input
{
    vertical-align : super;
    padding-left : 2px;
    padding-right : 2px;
}

.dropMenuButton
{
    position:relative;
    float: left;

    top: -1px;

    height: 20px;

    border-radius: 3px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    border-width: thin;
    padding-bottom: 2px;
    padding-top: 2px;

    display: inline-block;
    outline: none;
    cursor: pointer;
    text-shadow: 0 1px 1px rgba(0,0,0,.5);

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    color: #000;
    border: solid 1px #000;

    text-decoration: none;
    display: inline-block;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 80%;

    background: white;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(#D7D7D7));
    background: -moz-linear-gradient(top, white, #D7D7D7);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="white", endColorstr="#D7D7D7");
}

.dropMenuButton:hover
{   
    background: #D7D7D7;
    background: -webkit-gradient(linear, left top, left bottom, fr开发者_如何学运维om(#D7D7D7), to(white));
    background: -moz-linear-gradient(top, #D7D7D7, white);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#D7D7D7", endColorstr="white");
}

/* To center the text with the image */
.dropMenuLabel
{
    /* Changer Later */
    color: white;

    text-shadow: 0 1px 1px rgba(0,0,0,.5);
    cursor: pointer;
    padding: 0 5px 0 5px;   
    vertical-align:super ;
}

/* To hide the border */
iframe 
{
    border: 0px solid #ffffff;
}

input
{   
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.go
{   
    cursor: pointer;
    margin-left: -4px;
    height: 24px;
}

.imageButton
{   
    float: left;
}

.inButtonImage
{
    height: 15px;   
}

#searchForm
{
    float: left;
    vertical-align: middle;
    margin-left: -3px;
}

#searchForm img
{
    margin-left : 10px;
    vertical-align: middle;
    margin-bottom: 2px;
}

#searchForm input
{
    vertical-align: middle;
}

.separator 
{
    width: 1px;
    height: 16px;
    margin: 5px 3px 0;
    border-left: 1px solid #ABC6D7;
    background:#fff;
    float: left;
}

.textButton
{
    position:relative;
    float: left;
    cursor: pointer;

    top: -2px;
    margin-left: 4px;

    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    border-width: thin;
    padding-bottom: 2px;
    padding-top: 2px;
    border-style: none;
}

#YourToolbarFrame
{
    top: 0;
    left: 0;
    width: 100%;
    height: 39px;
    overflow: hidden;
    background-color: #E5E5E5;
    margin: 0;
    padding: 0;
    position: fixed; 
    /*border: 1px solid #BDC8D6;*/
    border: none;
    -webkit-box-sizing: content-box;
    z-index: 99999999;
}

---

If you are using DIV as your way of positioning then you can set them to

.yourDivClass {
 float:left;
}

or you could go with position:absolut if you now where to place them.

If you do this and your wrapper allows it then it will continue to add the divs to the right but it is realy hard to help without any sample code.