Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS inline-block issue - element being pushed down [duplicate]

Tags:

css

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.

like image 653
Abraham Avatar asked Aug 03 '12 12:08

Abraham


People also ask

How do you prevent inline-block elements from wrapping?

Add white-space: nowrap; to your . layout style declaration. This will do exactly what you need: preventing the divs from wrapping. Save this answer.

Why is display inline-block not working?

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.

How do you change a block element to an inline element?

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.

Is it possible to change inline element to block?

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.


1 Answers

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.

like image 95
Vladislav Qulin Avatar answered Sep 22 '22 19:09

Vladislav Qulin