CODEWITHSUNDEEP
htmllistcsshtml-lists
Omer M.
Omer M.

Reputation: 630

multiple UL's not same level

I've got a problem with the position of two UL's. I want the two UL's to be on the same level. As you can see in the Picture below, the first UL list is way down, while the second is at the top. I was able to recreate this on jsfiddle.

Link: http://jsfiddle.net/5krJU/

I was able to figure out that the problem is because the second list has more li than the first, but i wasn't able to fix it.

My current css looks like this:

#container {text-align: center; display:block;}
#container > ul { color:#776; display:inline-block; width:360px; list-style-type: none;}

and my html like this:

<div id="container">
 <ul>
    <li>item</li>
    <li>item</li>
 </ul>
 <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
 </ul>
</div>

Here's a picture of it: my problem

Update

i found out the answer.

Solution would be adding 'vertical-align: top;' to the ul's.

Please close this question.

Sorry for the inconvience.

Upvotes: 1

Views: 532

Answers (2)

thgaskell
thgaskell

Reputation: 13226

Since they are inline-blocks, you need to adjust the vertical alignment.

http://jsfiddle.net/5krJU/1/

CSS

#container > ul {
  color:#776;
  display:inline-block;
  width:60px;
  list-style-type: none;
  vertical-align: top
}

Upvotes: 1

Radu Chelariu
Radu Chelariu

Reputation: 446

Basically, you just need to float: left the lists. This JSFiddle should make everything clear. Cheers!

Upvotes: 0

Related Questions