3 column list - long text problem

Hi Folks,

Can anyone please tell me how I can do this with equal spacing for items with long titles?

I’ve attached a screenshot, is there a way I can space out items with long titles?

my code is just:

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

Many thanks

Hi,

If I understand what you want correctly then you are looking for a table grid type layout which can’t easily be done cross browser in CSS.

If the html can be changed then you could do rows of three as follows.


<!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">
.wrap {
    width:660px;
    border:1px solid #000;
    position:relative;
    overflow:hidden;
}
ul {
    margin:-1px 0 0;
    padding:0;
    list-style:none;
    overflow:hidden;
    width:660px;
    border-top:1px solid #000;
}
li {
    display:inline;
}
a {
    display:-moz-inline-box;
    display:inline-block;
    width:195px;
    padding:10px;
    vertical-align:top;
    text-decoration:none;
    overflow:hidden
}
.abs {
    border-left:1px solid #000;
    border-right:1px solid #000;
    position:absolute;
    top:0;
    bottom:0;
    left:220px;
    width:220px;
    margin:0;
}
* html .abs {
    height:999em;
}
</style>
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="#">this is a test</a></li>
        <li><a href="#">this is a test</a></li>
        <li><a href="#">this is a test</a></li>
    </ul>
    <ul>
        <li><a href="#">this is a test this is a test</a></li>
        <li><a href="#">this is a test</a></li>
        <li><a href="#">this is a test</a></li>
    </ul>
    <ul>
        <li><a href="#">this is a test</a></li>
        <li><a href="#">this is a test this is a test this is a test</a></li>
        <li><a href="#">this is a test</a></li>
    </ul>
    <ul>
        <li><a href="#">this is a test</a></li>
        <li><a href="#">this is a test this is a test this is a test</a></li>
        <li><a href="#">this is a test</a></li>
    </ul>
    <ul>
        <li><a href="#">this is a test</a></li>
        <li><a href="#">this is a test</a></li>
        <li><a href="#">this is a test</a></li>
    </ul>
    <ul>
        <li><a href="#">this is a test this is a test this is a test this is a test this is a test this is a test</a></li>
        <li><a href="#">this is a test </a></li>
        <li><a href="#">this is a test</a></li>
    </ul>
    <ul>
        <li><a href="#">this is a test</a></li>
        <li><a href="#">this is a test this is a test this is a test</a></li>
        <li><a href="#">this is a test</a></li>
    </ul>
    <ul>
        <li><a href="#">this is a test this is a test this is a test</a></li>
        <li><a href="#">this is a test</a></li>
        <li><a href="#">this is a test last</a></li>
    </ul>
    <p class="abs"></p>
</div>
</body>
</html>


However it would be almost impossible to do as a single list and still preserve the
borders.

You can get close but I would not use this as it’s overly complicated and doesn’t work too well anyway:


<!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">
ul {
    margin:0;
    padding:0;
    list-style:none;
    width:659px;
    border:1px solid #000;
    overflow:hidden;
    position:relative;
    overflow:hidden
}
li {
    display:inline;
    margin:-1px 0 0 -3px;
    border-top:1px solid #000;
}
a {
    display:-moz-inline-box;
    display:inline-block;
    width:200px;
    padding:10px;
    vertical-align:top;
    text-decoration:none;
    overflow:hidden
}
.abs{
    border-left:1px solid #000;
    border-right:1px solid #000;
    position:absolute;
    top:0;
    bottom:0;
    left:220px;
    width:220px;
}
* html .abs{height:999em;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
ul{width:660px}
li {
    display:inline;
    margin:-1px 0 0 -5px;
}
</style>
<![endif]-->

</head>
<body>
<ul>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test this is a test this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test this is a test this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test this is a test this is a test this is a test this is a test this is a test</a></li>
    <li><a href="#">this is a test </a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test this is a test this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test</a></li>
    <li><a href="#">this is a test this is a test this is a test</a></li>
    <li><a href="#">this is a test</a></li>
 <li class="abs"></li>
</ul>
</body>
</html>


It may be better to forget the borders and go for a simpler design if you want just one list only.:slight_smile: