CSS columns inside <li>?

[Stodge]

I know this might seem odd, but is it possible to use CSS to display a
list item in three column? I'm trying to use margin or display left/
right, but the text appears on different lines and is completely
wrong. Any suggestions appreciated. Thanks

[jkronika]

I do something like this:

ul.column {
float: none;
margin: 0.5em 0 0.5em 1.4em;
width: auto;
}

ul.column>li {
float: left;
margin: 0 2.9% 0 0;
}

ul.column.half>li { width: 47%; }
ul.column.third>li { width: 30.3%; }
ul.column.fourth>li { width: 22%; }

Then your HTML looks something like this:

<ul class="column half">
<li>First column</li>
<li>Second column</li>
<li>1st col, 2nd row</li>
<li>2nd col, 2nd row</li>
<li>1st col, 3rd row, likely to wrap to two lines due to the
length of content</li>
<li>2nd col, 3nd row</li>
<li>2nd col, 4th row</li>
</ul>

Note that if you have long content in any of the LIs, the positioning
of items in each column may become less predictable using this method.
Since the widths are calculated using percentages, they will expand
(or contract) as the browser window size changes (and depending upon
the native resolution of the user's monitor). To avoid this, you can
modify the widths and margins on the LIs to use fixed values. However,
since a UL is intended for unordered lists, the precise location of
each item in the columns __should__ be arbitrary, assuming semantic
use of the tag.

Hope that works for you!

--
Jake Kronika
Gridline Design
www.gridlined.com

[Michał Furmaniak]

If you have tabularic data to present you shouldn't use ul tag. Use properly designed and styled <table> tag. Li are for lists.

On Dec 11, 12:03 pm, Stodge <sto...@gmail.com> wrote: > I know this might seem odd, but is it possi...

[Michał Furmaniak]

If the text apears in lines prabobly it's because you are using block tags (not inline tags). You should use most semantic tag for content you wan't to present & either give it display:inline in css or leave it (if it's inline by default).

On 13 Dec 2009 15:16, "jkronika" <jkro...@gmail.com> wrote:

On Dec 11, 12:03 pm, Stodge <sto...@gmail.com> wrote: > I know this might seem odd, but is it possi...