0

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.

Community
  • 1
  • 1
Jessica
  • 9,379
  • 14
  • 65
  • 136

1 Answers1

3

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

wmeade
  • 359
  • 1
  • 8
Martin Schneider
  • 3,268
  • 4
  • 19
  • 29