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.
Add white-space: nowrap; to your . layout style declaration. This will do exactly what you need: preventing the divs from wrapping. Save this answer.
Because you are using inline-block, any newline character or whitespace you have after the element and before another inline element, will be counted as a space. If you want the blocks to stack side by side like in your picture, your HTML would need to be like this.
You can set a block-level element to display like an inline element by setting the display property to inline. You can also cause inline elements to behave like block-level elements using the display property.
You can change the visual presentation of an element using the CSS display property. For example, by changing the value of display from "inline" to "block" , you can tell the browser to render the inline element in a block box rather than an inline box, and vice versa.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With