18

Demo: http://jsfiddle.net/q4uNj/
So here's the problem: I can't figure out why the second div - class="other" - is being pushed down.

djot
  • 2,952
  • 4
  • 19
  • 28
Abraham
  • 20,316
  • 7
  • 33
  • 39
  • In all the answers below (except for the one suggesting I use `span`), the textbox is placed near the top of `#toolbar`. Can it be vertically centered? – Abraham Aug 03 '12 at 12:19
  • 1
    Nevermind, got it. `vertical-align: top`, as per below, with `line-height: 32px` does the trick. Thanks, everyone! – Abraham Aug 03 '12 at 12:20

3 Answers3

44

You can use css-property vertical-align. Add it to ".other" rule and it's gonna be ok.

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

​

Or u can use the advice below, but don't forget to add "overflow: hidden" to #toolbar.

Vladislav Qulin
  • 1,872
  • 1
  • 17
  • 20
  • So simple, but eluded me. Thanks! – Tyson Phalp Apr 27 '13 at 21:34
  • Doesn't work! The height of the container is still altered, simply by setting a child's overflow to hidden. All the content below the container then shifts! If you try to hide a child with jQuery.hide, it sets overflow to hidden for the duration of the animation, causing the content below to shift temporarily through the animation. Setting vertical-align to top on all the child elements does not help; container still changes size. – Triynko Mar 17 '16 at 01:17
  • @Triynko, i believe you have a different case. V-A is not a silver bullet to use every time. Please, create a separate question or send jsfiddle link in comment here. – Vladislav Qulin Mar 17 '16 at 08:59
1

Both of them (.button and .other) should have float:left, so everything will be ok

Mihai Matei
  • 24,166
  • 5
  • 32
  • 50
0

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

Correct 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;
    }
Sumesh TG
  • 440
  • 1
  • 4
  • 15