Search code examples
javascriptjqueryhtmlcssspectrumjs

Div isn't in correct position

I'm using Spectrum color picker plugin. There are 2 containers. 1 - .sp-picker-container and .sp-palette-container. The layout of the containers are created with float. I don't want that because that isn't the correct way to lay things out. (see this answer for reference.)

I used display: inline-block instead, and removed, or more accurately set float to none. When I do that, the color picker, (the container on the right side) is pushed a bit down.

How can I make it display: inline-block and float: none, and have the right side container to the top, leveled with the left side containers top?

Relavent code:

.sp-picker-container,
.sp-palette-container {
  float: none;
  display: inline-block;
}

JSFiddle

I tried adding the code snippet, but the problem wouldn't happen in the code snippet.

Solution

  • Try adding the property vertical-align:top to .sp-picker-container, .sp-palette-container:

    .sp-picker-container,
.sp-palette-container {
  float: none;
  display: inline-block;
  vertical-align: top;
}

    See http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/ for a reference