CSS3 column-count in IE

pr0gr4mm3r posted this at 14:40 — 21st April 2009.

Joined: Sep 2006

I am using the CSS3 property column-count to show an unordered list in multiple columns, and it looks great on the page...but now I see that it's not supported in MSIE. Is there a way to replicate this property in Internet Explorer?

decibel.places posted this at 15:51 — 21st April 2009.

He has: 1,494 posts

Joined: Jun 2008

not that I know of...

I can imagine a dhtml solution, using character counts and/or element heights to create columns, sounds like it may be more trouble than it's worth

a designer recently gave me a 3-column layout made in Illustrator and was surprised each column had to go into a separate container for the web.

the column-count property sounds useful, but I prefer to make the doc structure with HTML and use CSS for display - column-count is sort of structure

pr0gr4mm3r posted this at 15:49 — 21st April 2009.

He has: 1,502 posts

Joined: Sep 2006

While using a fixed column layout works most of the time, I would need a solution for dynamic content. For example, if I have a list of 100 items (sorted), and I need to add one in the middle, it can get annoying moving them over to other columns manually.

webwiz posted this at 17:16 — 21st April 2009.

He has: 629 posts

Joined: May 2007

There is this: Multiple Column Lists - seems to work cross-browser.

decibel.places posted this at 18:19 — 22nd April 2009.

He has: 1,494 posts

Joined: Jun 2008

@Brutal - that link does not display anything related to this thread

@webwiz - as usual, David, you display a deep knowledge of web development. The list columns could work, with some prep on the creation of the content...

but of course there is a "gotcha" - the list items have to be equal to or less than the li width - otherwise a longer item will flow over many lines of the column (perhaps not a problem)

  <style>
	ul {
	  float: left;
	  width: 12em;
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}
	 
	li {
	  float: left;
	  width: 6em;
	  margin: 0;
	  padding: 0;
	}
 </style>

 <ul>
  <li>Antelope Antelope Antelope Antelope Antelope</li>
  <li>Bison</li>
  <li>Camel</li>
  <li>Deer</li>
  <li>Eland</li>
  <li>Gazelle</li>
</ul>

while increasing the li width for the larger element (say 40em) loses the columns

BUT increasing the ul width too (say 50em) will restore columns, although the left one is wide to accomodate the longer first li

  <style>
	ul {
	  float: left;
	  width: 50em;
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}
	 
	li {
	  float: left;
	  width: 20em;
	  margin: 0;
	  padding: 0;
	}
 </style>