# Solved: 2 Column List



## Saikuron (Sep 17, 2008)

Heres what I'm trying to achieve (shopped).










What I currently have. After trying out some things with no luck, I stripped it out to the basics.


```
<style type="text/css">
ul { list-style-type: none; }
ul li { border-bottom: 1px solid #eee; }
ul li span { margin-left: 400px; }
</style>

<ul>
<li>term one<span>Definition</span></li>
<li>term two<span>Definition</span></li>
<li>term three<span>Definition</span></li>
<li>term four<span>Definition</span></li>
...
</ul>
```
I have it this way because its clean and easy to style both columns. But maybe that is the problem.

Any help is greatly appreciated. TIA.


----------



## amanxman (Mar 28, 2006)

Hey,

I don't think it's possible using just one list. You'll need to use a 2 column css layout, i.e.


```
<div id="right">
<ul>
<li>definition one</li>
<li>definition two</li>
</ul>
</div><!-- end right -->

<div id="left">
<ul>
<li>term one</li>
<li>term two</li>
</ul>
</div><!-- end left -->
```
with corresponding CSS:

```
#left
{
width: 200px;
}

#right
{
float: right;
width: 200px;
}
```
or similar (i.e. just floating one of the elements to the side so they end up side by side.

OR another option:


```
<ul>
<li>term</li>
<li>term</li>
</ul>

<ul>
<li>definition</li>
<li>defination</li>
</ul>
```
CSS


```
ul
{
float: left;
width: 200px;
}
```
That latter one will be better - it'll simply float each list to the left, thus putting them side by side. I'd go for this 2nd option but I only thought of it after writing the first and thought I'd leave the first on there too for reference!

Either way, you still need two seperate lists.

Hope that helps


----------

