Two unordered list side by side

Question

I have two unordered list and I am trying to place them side by side. This works in Firefox, Safari and Chrome & 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 expected is:

1  3
2  4

`float:left;` them maybe? (with second having left margin) – Brad Christie Jun 24 '11 at 18:29 — Brad Christie, Jun 24 '11 at 18:29

score 13 · Accepted Answer · answered Jun 24 '11 at 18:30

13

IE 7 doesn't deal with inline-block properly. See http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html for details, but in brief, add the following styles to your lists:

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

answered Jun 24 '11 at 18:30

George Cummins

28,485
8
71
90

score 6 · Answer 2 · edited May 23 '17 at 11:53

6

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

For block-level elements (such as ul), you have to whip it into shape:

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

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

I've gone into more detail about this in the past, see: Inline block doesn't work in internet explorer 7, 6

edited May 23 '17 at 11:53

Community

1
1

answered Jun 24 '11 at 18:30

thirtydot

224,678
48
389
349

I forgot to mention it in my answer, but I changed your outer `span` to a `div`. A `ul` is not a valid child of `span`, so your HTML was invalid. – thirtydot Jun 24 '11 at 18:38

score 4 · Answer 3 · answered Jun 24 '11 at 18:29

4

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/

answered Jun 24 '11 at 18:29

Jason Gennaro

34,535
8
65
86

1

True, though I don't really like the width:10%. Also you'll have to either use clear:left on the following element or use a clearfix (google it) on an element which would contain both lists. – khel Jun 24 '11 at 18:32
@khel. The width can be set to whatever. It is only for example. – Jason Gennaro Jun 24 '11 at 18:36
when the list on the left has more items than the list on the right. The right list does not start from the top or not align on the top with the left. any fix for this? – TX T Aug 21 '18 at 02:52

Two unordered list side by side

3 Answers3