Управление обновлением окна

Question

В настоящее время я разрабатываю панель инструментов, но у меня проблема с чем-то. Ну думаю, что если мое окно находится на полном экране все нормально, но когда окна размеры которого меняются, то мои кнопки в нижней строке моей панели ...

Что-то важное что моя панель инструментов имеет высоту 20 пикселей. Поэтому обычно кнопка не может идти дальше, чем 20px

Кто-нибудь знает, как я могу исправить эту ошибку?

yourToolbar Код:

CSS код:

.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, from(#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; 
} 

Answer 1

Если вы используете DIV в качестве способа позиционирования, то вы можете установить их в

.yourDivClass { 
float:left; 
} 

или вы можете пойти с позицией: absolut, если вы сейчас, где разместить им.

Если вы сделаете это, и ваша оболочка разрешит его, он будет продолжать добавлять divs вправо, но очень сложно помочь без кода образца.