Display two or more unordered lists following each other

Question

First, I will clarify that I am not trying to display inline list items. I know you can do this using css:

li { display: inline; } li { display: inline; } .

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

ul { display: inline; }

but that will not work. They will not be displayed on one line. It's funny, since every other element of the block that I tried to display as inline div, li works fine. I experimented a lot, making sure that the width of the elements is something that can fit next to eachother and put ul inside the divs that display the inline. So my question is: is there a tag that cannot be displayed in a string?

Postscript If this is not possible, I will probably go with an absolute position to align them together, maybe I could use a float, but a float will not work well in a web page layout.

Answer 1

Use inline-block . See fiddle

 ul { display: inline-block; } 

PS I used the script from @ jmeas comment, but suggested that you want to keep display: block on li s