Discuss: CSS Swag: Multi-Column Lists
by Paul Novitski
- Editorial Comments
52 Printing problem with Multi-columns
I used multi-column method for my list but i have a problem:
my list have many rows and when i print it, it is printed only in one page and is not divided in multi-pages and i lost the last rows.
posted at 04:18 pm on November 14, 2005 by Francesco Cangialosi
53 This would be way easier in CSS3
using the column part: http://www.w3.org/TR/2001/WD-css3-multicol-20010118/
ul li {
column-count: 3;
Column-gap: 1em;
}
<ul>
<li>blah</li>
…
posted at 10:08 pm on December 4, 2005 by b b
54 Question on Multicolumn Formatting
I’ve been messing with the CSS and HTML for awhile, but I can’t figure out how to get text to show up like:
Text 1 Text 2 Text 3 Text 4
and then repeat. Any help would be nice. (anormlguy007@yahoo.com)
posted at 03:32 pm on March 21, 2006 by richard spencer
55 Question on Multicolumn Formatting
On my previous one, the spacing didn’t go through…
Text 1 aligned left, then Text 2, 3, and 4 aligned right, with Text 1 and 2 on the same line.
posted at 03:34 pm on March 21, 2006 by richard spencer
56 How to prevent wrapping of DIVs?
I used to design with HTML tables but then I found out the drawbacks of table and use of Divs instead. However my Float Left divs wrap underneath one another when they dont fit in the borwser’s size, for eg
[first div] [second div] [third div]
if you customize the size of browse to less 800 i get something like:
[first div] /* second wraps */
[second div] /* third wraps */
[third div]
Any idea as to How I need to solve this issue? Thanks.
posted at 02:27 am on April 10, 2006 by student rhr
57 Background images
Nice post, one that I’ve only just stumbled upon….so I’ve read it, and im pretty sure that my navigation isn’t going to change, so I’ve opted for Method 4.
And it works…that is until I changed it to use a bulleted list and instead of using a bullet image, I used a background image. Adding the code below to the “ul li” class works for all but the top two items in each subsequent list after the first. Removing the “position:relative” ie/hack solves it, but then the ol’ link problem reoccurs..
background-image: url(../images/bullet.gif);
background-repeat: no-repeat;
background-position: 10px;
padding-left:30px;
Any ideas how I can get round this?
posted at 10:04 pm on May 18, 2006 by Aarron Painter
58 Moved columns inherit background of parent in IE
I used method 6 for a 2-column list but noticed that in IE the second column inherited the background from the parent element. It has something to do with the negative margins as using a positive or zero margin resulted in no background for the second column. The easiest way around this bug is to set the background to “none” for all li elements.
posted at 05:37 pm on August 6, 2006 by Ian Stevens
59 List Splitter web application
You can create multicolumn lists with my List Splitter application. Cool animation too.
posted at 10:49 am on October 1, 2006 by Barry K
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)




51 Untitled
If we’re talking which is more Semantically Pure™, I’m really not convinced that an attribute-encrusted nightmare of IDs beats a two-celled table. Never mind, fer-God’s-sakes, unique classes. Yeah, they’re attributes and not structure. They also blow out the character count sonmething fierce.
That said, I probably wouldn’t be keen on splitting an ordered list into columns of any sort anyway, what with it being a colossal pain in the bum to read. If I do, however? Ara’s JavaScript example looks pretty good right now.
posted at 02:53 am on November 3, 2005 by Raena Armitage