13

I discovered a strange CSS problem this morning and I'm hoping the CSS experts can help me out. In this demo, why is the text in the red div pushing it down? I expected that the two divs would be next to each other. Thanks!
EDIT: Thanks guys for the answers. I will accept an answer in a bit. Can anyone explain why this is happening?

Abraham
  • 20,316
  • 7
  • 33
  • 39

2 Answers2

24

...........................

Hi now used to vertical-align: top;

div {
    display: inline-block;
    height: 50px;
    width: 50px;
    vertical-align: top;
}

Demo

Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
  • Can you explain why you did not use float:left , this is a clean solution.+1 for this. – Priyank Patel Oct 10 '12 at 11:52
  • 1
    Yeah, I think this is the best solution. Thanks! :) Do you know why the text caused that issue? – Abraham Oct 10 '12 at 11:52
  • 2
    you can used to display inline-block that means by defulat inline-block is baseline than define to always vertical-align top if you define display inline-block element in any html element . – Rohit Azad Malik Oct 10 '12 at 11:55
  • oh thank you. I could not for the life of me figure out why all the browsers were drawing these boxes (inline-block) at different heights! I was about to cave and use absolute positioning... – lukecampbell Jul 12 '16 at 14:17
-3

Adding float:left solves the issue.

Working sample

Priyank Patel
  • 6,898
  • 11
  • 58
  • 88
  • I think it would be interesting to know why it is working this way with text. – Tim Tosi Oct 10 '12 at 11:49
  • @TimotheeTosi I noticed that , I don't know why , can you let me know.Thanks. – Priyank Patel Oct 10 '12 at 11:52
  • "inline-block tells browsers to place that ele­ment inline, but to treat it as though it were a block level ele­ment." So you can float it! http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/ – Ben Racicot Dec 30 '14 at 17:29
  • `float: left` cause this [Click the link to view the image](http://i.stack.imgur.com/gYRqS.jpg) – Ankit Nov 22 '15 at 18:46