Question

I’ve tried various combinations of html elements and CSS to get this to work to no avail. How do I accomplish the following?

I have two DIVs side-by-side which I want to size automatically according to the width of their contents (was using “display: inline-block” for that). Then, I want the contents of each of those DIVs aligned to the top of the DIV (by default, the contents are bottom-aligned). The contents are a number of labels (spans) and text (database data). Also, these two DIVs should stay to the right of another DIV on the left of the page which is the menu.

MENU      AUTO            ANOTHER
FIXED     WIDTH           COLUMN (DIV)
WIDTH     DIV             ALSO
DIV       ACCORDING       AUTO
          TO              SIZED
          CONTENTS        TOP-ALIGNED
          TOP-ALIGNED     CONTENTS
          CONTENTS        SOME
          SOME            PADDING
          PADDING TO      TO MY LEFT
          MY LEFT AND     AND RIGHT
          RIGHT

Answer 1

you have to vertical-align:top the parent (column) div, as well as the spans on the inside. display:inline-block makes width and height go to auto (like an inline element), and as you said default vertical align is baseline.

http://jsfiddle.net/EjdUf/1/