Placing two ul lists side by side - Newbie

Hello all,

If we have something like:


<ul>
  <li></li>
  <li></li>
  <ul>
    <li></li>
    <li></li>
  </ul>
</ul>

Can we use css to display the two ul lists side by side, in order to have something like:

item subitem
item subitem
item subitem

where item would be the items of the parent UL and subitem the items of the child ul ?

Thanks in advanced,
Márcio

Of course this is possible somehow but why do you want to use such a markup at all? In your snippet there is no semantic relation between item and subitem. Why not use a table?

Hi,

You could do it only if the main list and the sublist had the same number (or the sublist had less) of items by absolutely positioning the sublist to the top and right of the main list.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
ul {
    list-style:none;
    position:relative;
}
ul.list {
    float:left;
    width:450px;
    margin:20px;
}
ul.list li {
    width:150px;
}
ul.list ul{margin-bottom:20px}
ul.list ul ul {
    position:absolute;
    top:0;
    left:170px;
    width:150px;
}
ul.list ul li {
    background:yellow;
}
</style>
</head>
<body>
<ul class="list">
    <li>
        <ul>
            <li>main item 1</li>
            <li>main item 1</li>
            <li>main item 1</li>
            <li>main item 1
                <ul>
                    <li>Sub Item 1</li>
                    <li>Sub Item 1</li>
                    <li>Sub Item 1 </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>main item2</li>
            <li>main item2</li>
            <li>main item2
                <ul>
                    <li>Sub Item 2</li>
                    <li>Sub Item 2 </li>
                    <li>Sub Item 2</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>main item3</li>
            <li>main item3</li>
            <li>main item3
                <ul>
                    <li>Sub Item 3</li>
                    <li>Sub Item 3 </li>
                    <li>Sub Item 3</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>main item4</li>
            <li>main item4</li>
            <li>main item4
                <ul>
                    <li>Sub Item 4</li>
                    <li>Sub Item 4 </li>
                    <li>Sub Item 4</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>
</html>

However if the sublist has more items than the main item then they would overlap each other because they are absolutely placed.

Thanks a lot,

I’ve tested the snipped code provided, with more subitems then items, and it seems to work quite well. Here:


<ul class="list">
    <li>
        <ul>
            <li>main item 1
		<ul>
                    <li>Sub Item 1.1</li>
                    <li>Sub Item 1.2</li>
                    <li>Sub Item 1.3 </li>
		    <li>Sub Item 1.4 </li>
		    <li>Sub Item 1.5 </li>
		    <li>Sub Item 1.6 </li>
                </ul>
	    </li>
            <li>main item 2</li>
            <li>main item 3</li>
            <li>main item 4</li>
        </ul>
    </li>
</ul>

Only something like this will be needed:
http://www.nuvemk.com/teste232.php

I will need no more then this, however, it seems that, by having only this, I end up having to much unnecessary html elements. Do you agree?

Regards,
Márcio

Where would you put the sub list for “main item 2”?

It would overlap the other subsist which was the point I was making about keeping the sublist to the same number of items as the main list.

If you only have one sub list then this probably isn’t an issue.

As you only have only one sub list then you could remove a level of nestings.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
ul {
    list-style:none;
    position:relative;
}
ul.list {
    float:left;
    width:450px;
    margin:20px;
}
ul.list li {
    width:150px;
}
ul.list ul  {
    position:absolute;
    top:0;
    left:170px;
    width:150px;
}
ul.list ul li {
    background:yellow;
}
</style>
</head>
<body>
<ul class="list">
    <li>main item 1
        <ul>
            <li>Sub Item 1.1</li>
            <li>Sub Item 1.2</li>
            <li>Sub Item 1.3 </li>
            <li>Sub Item 1.4 </li>
            <li>Sub Item 1.5 </li>
            <li>Sub Item 1.6 </li>
        </ul>
    </li>
    <li>main item 2</li>
    <li>main item 3</li>
    <li>main item 4</li>
</ul>
</body>
</html>

However, as mentioned by LasrsK we would need to know what relationship your data has to know if lists are the most suitable. It may be that a dl list is more suitable or perhaps a table.

If you just want two lists then it may be better just to float two separate lists instead.

It all depends on the content and what is going to happen next :slight_smile:

Hi,

Thanks a lot again,

They will never overlap because I will have always no more then two ul per page displayed to the user.

If the user is on page:
www.blabla.com/items/1/
They will see only items 1 and their subitems if they exist.

If the user is on page:
www.blabla.com/items/2/
They will see only items 2 and their subitems if they exist.

etc…

This is done on the server side.

The lists items and sublist items are related.
A definition list will not fit here I believe.

A table could also do it. But since the items and subitems ARE related, I believe the list is the best option.

I will always have two ul lists or one ul list, yes, however, I believe I cannot have them just floated, because of the way my html elements are being generated on the php side. (I have a foreach inside another foreach, hence, I’m unable to echo two separate unordered lists). But I can be wrong of course.

I believe the code just provided will do it quite well. I will study it and struggle with it. :slight_smile:

If you believe I’m on the wrong track, please, let me know. :shifty:

Thanks a lot for your time,
Márcio