Many if not most of the difficulties I run into with CSS (by which I do not mean to include times when I simply don’t know the desired command) come from not having the right intuition – where in the hierarchy does the style need to go, and why? What is this measurement relative to? I wanted to record a few examples.

To make a “drop-up” menu rather than drop-down, simply assign “bottom: 100%;” to the submenu (ul). Bottom measures up from where the bottom of the submenu would normally be (at least in this case) and is relative to the size of the container, here the menu item (li) the submenu drops down from. Therefore it shifts the bottom of the submenu to the top of the owner menu item. Very simple if you remember those details.

Although you might think a style like line-height would apply to any container that can have text in it, it only applies to block-displayed elements and has to be inherited by inline elements. This sort of “too close, back up” issue crops up repeatedly for me.

Finally, I had an interesting experience with positioning recently. I had a div that I’d set to display inline (changing it to a span would have involved editing WordPress), and it followed a span that took up not quite half a line, filling in the rest. On line two the div text began at the left end of the span text as though they were an unbroken paragraph, which I wanted. Within that div at the end I had another div that I wanted to scoot to the right. I couldn’t get it to go. There are things I tried whose failure to work is still mysterious to me, but I do know why positioning from the left didn’t work. The next box up with “position: relative;” was the div being displayed inline, and its left end was apparently the beginning of the text, not the farthest left the text ever got. Therefore I was essentially positioning relative to the end of the preceding span, which meant in each box of this type the last div was in a different spot according to the length of the span text. I removed the positioning from the inline div and moved it to the first thing up that contained all three boxes, and then it worked as expected.