Floating list items to base align with text

Hello, I’ve been struggling with this and would be grateful for some help here.

I’ve got a navigation list in the footer of a webpage and the list items are supposed to run in the same line as some other text. However, they’re too high and I don’t know why. Here a link:


Many thanks

Floats do just that… they FLOAT UP to the top of their containers. :slight_smile:

I’ve been in this trick situation myself and have reasoned that there are usually one of 3 options:

  1. If am off by specific amount, I use margin-top ( the amount) to push the float down so that it’s flushed with the content; since your ul is transparent , you could also use padding-top. BTW, chances are that the offset is cause by the padding, line height and font size of the site info

  2. If this is not possible, or you dread the math (it’s usually not that hard to do, but people do dread math)… you could try grouping the two elements, and using display:inline-block ; vertical-align: top; and , on the container element, text-align:whatever; ( this assume you want both elements to display ADJACENT (not opposite) to each other on the left or right of the container

  3. If you have painted yourself into a corner, but still can guess the amount by which your position is offset, you could use position:relative; top: (amount).

Hope that helps

Great – I’ve got it fixed with inspiration from you! Thanks Mr. dresden_phoenix.