Two unordered lists side by side

Question

I have two unordered lists, and I'm trying to put them side by side. This works in Firefox, Safari, and Chrome and IE8. But not IE 7 or compatibility mode.

Here's the markup:

<span> <ul style="list-style-type: none; display: inline-block;"> <li>1</li> <li>2</li> </ul> <ul style="list-style-type: none; display: inline-block;"> <li>3</li> <li>4</li> </ul> <span> 

Basically, the following is expected:

 1 3 2 4 

Answer 1

IE 7 does not apply to inline-block correctly. See http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html for more details, but briefly add the following styles to your lists:

 zoom:1; *display: inline; _height: 30px; 

Answer 2

In IE6 / 7, display: inline-block only works with elements that are naturally inline (like span ).

For block level elements (e.g. ul ) you have to push it into the form:

See: http://jsfiddle.net/yw8uZ/

 ul { display: inline-block; *display: inline; zoom: 1 } 

I talked about this in detail in the past: The embedded unit does not work in Internet Explorer 7, 6

Answer 3

You could float them.

  <ul style="width:10%; float:left;"> <li>1</li> <li>2</li> </ul> <ul style="width:10%; float:left;"> <li>3</li> <li>4</li> </ul> 

http://jsfiddle.net/jasongennaro/K3xcg/