Variable-width items in two-column index?

HTML & CSS
1

I am currently using the following CSS to produce a two-column index:


div.Index {
margin:0 0 0 0;
text-align:center;
width:100%;
}

div.Index ul {
list-style:none;
list-style-position:outside;
list-style-type:none;
margin-left:0;
padding-left:0;
}

div.Index ul li {
display:-moz-inline-box; /* mozilla only */
display:inline-block; /* browsers that support display:inline-block like safari & opera*/
padding:10px;
text-align:center;
vertical-align:top;
}

div.IndexItem {
text-align:left;
width:250px;
}

My issue is that the page layout is setup so that the middle section (where the index goes) has a minimum of about 600 (to accomodate 1024 width) and a maximum of 800. Is it possible to do a similar setup where each item takes up a percentage of the available width instead of a fixed width to better use the space on the 800 wide layout? Or to use min-width (250) and max-width (350) in such a way that the two-column layout is retained?

2

Try something like this:

add the line in red below

div.Index ul li {
display:-moz-inline-box; /* mozilla only */
display:inline-block; /* browsers that support display:inline-block like safari & opera*/
padding:10px;
text-align:center;
vertical-align:top;
[COLOR="Red"]width: 45%;[/COLOR] /* add this line */
}

and remove the line in red below…

div.IndexItem {
text-align:left;
[COLOR="Red"]width:250px;[/COLOR] remove this line
}

Is that what you mean?

3

Thank you, that did it!