CODEWITHSUNDEEP
htmlcssinternet-explorer
Gabe
Gabe

Reputation: 50493

Two unordered list side by side

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

Upvotes: 14

Views: 80509

Answers (3)

thirtydot
thirtydot

Reputation: 228182

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

Upvotes: 6

George Cummins
George Cummins

Reputation: 28906

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;

Upvotes: 13

Jason Gennaro
Jason Gennaro

Reputation: 34855

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/

Upvotes: 5

Related Questions