Displaying Two Or More Unordered Lists Next To Eachother

Question

First I'll clarify that I'm not trying to display list items inline. I know you can do that by using css:

li { display: inline; }.

What I'm trying to do is position two ul's next to eachother using a relative position, but it should work without the relative position also.
I've tried

ul { display: inline; }

but it doesn't work. They won't appear on the same line. Funny since every other block element that I've tried to display inline like, div, li works just fine. I've done a lot of experimenting with making sure that width of the elements is something that could fit next to eachother and putting the ul's inside div's that display inline. So my question is, is ul a tag that is impossible to display inline?

P.S. If it is impossible I'll probably go with a absolute position to line them up together, maybe I could use float also but float would not work well in my webpage layout.

Heparin

Really? What browser is this? This JSFiddle works for me in Chrome 23. – Amalbergas

Firefox. I have not tried it in any other browsers though. – Heparin

I just looked at jsfiddle.net/2r5ER and the thing is that I want the lis to be block. Just the uls are supposed to be inline. I tried the code from the fiddle you provided in notepad++ and it's the same in IE, firefox and chrome. The answer to the problem is in my accepted answer that ori posted. – Heparin

Answer 1

Use inline-block. See fiddle

ul { display: inline-block; }

P.S. I used the fiddle from @jmeas's comment, but assumed you wanted to keep display: block on the lis

Yourself

And yes, I wanted to keep li li s display: block – Heparin

@Yourself is there any way to have different sized lists adjacent to each other without the blank space above shorter lists? Here is an example: jsfiddle.net/2r5ER/276 (I am referring to the blank space above the word 'HI' - is it possible to remove it? – Brewis

@Brewis I just stumbled upon this question because I was asking myself exactly the same question. Did you happen to find a solution to how you could but them next to each other without the blank space? Thanks. – Weddle

@MennoVanDijk this was a long time ago, so my memory is very bad but, unfortunately, I didn’t find anything :(. I think I tried rearranging the lists in a different fashion – Brewis

@Brewis I understand, long long time ago. I managed to figure it out using Bootstrap instead. Yay technology :). – Weddle

@MennoVanDijk to align the lists to the top use "vertical-align: top;" – Iodine