Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Display inline block hover

Display inline block hover

Problem

I am using display: inline-block; to keep some div's next to each other. I do not know why but on hover the div will move up. I think the amount it moves up has to do with the padding of an element in its non hover form(The .title class element). This is very odd and I cannot figure out why this is happening because all values are reset in the hover form.

JSFiddle

Note I'm using Sass so the css might look a bit weird

Problem courtesy of: Noah Huppert

Solution

.option {
  vertical-align:bottom;
}

Because you declare the elements inline, they follow the same vertical alignment rules as all flowing content of a page - sort of centered. Force it to a fixed position of the entire line and it's solved.

Solution courtesy of: Niels Keurentjes

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Display inline block hover

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×