Проблема с встроенным блоком CSS - элемент сбрасывается вниз

Демо: http://jsfiddle.net/q4uNj/
Итак, вот проблема: я не могу понять, почему второй div - class="other" - толкается вниз.

Ответ 1

Вы можете использовать css-свойство vertical-align. Добавьте его в правило ".other", и все будет хорошо.

.other {
    display:inline-block;
    vertical-align:top;
    height:32px;
    margin:2px;
}

Или вы можете использовать приведенный ниже совет, но не забудьте добавить "overflow: hidden" в #toolbar.

Ответ 2

Оба из них (.button и .other) должны иметь float: left, поэтому все будет нормально

Ответ 3

http://jsfiddle.net/q4uNj/14/

Исправить css

#toolbar {
  height: 36px;
  width: 100%;
  background: lightgray;
   clear:both;
}
.button {
  height: 30px;
  width: 36px;
  margin: 2px;
  float:left;
  border: 1px solid #000;
  cursor: pointer;
  border-radius: 2px;
}
.other {
    float:left;
    height:32px;
    margin:2px;
    }