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" <[email protected]> wrote:

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

On Dec 11, 12:03 pm, Stodge <[email protected]> wrote: > I know this might
seem odd, but is it possi...

-- 
--
You received this because you are subscribed to the "Design the Web with CSS" 
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]

Reply via email to