HOWTO: Style a Multi-Column List in HTML

Link: https://dannyman.toldme.com/2012/10/22/html-css-ul-li-columns/

For a project at work I was asked if I could lay out a long table-of-contents in our CMS as multiple columns. Logically enough, the table-of-contents renders as a flat, unordered list (UL) of list items (LI) … arranging that as multiple columns is a preposterous idea! Of course, preposterous questions can be very interesting.

So, we start with something like this:

		<h1>Yadda Yadda</h1>
		<ul class="columns">
			<li>BLAH blah blah one</li>
			<li>BLAH blah blah two</li>
			<li>BLAH blah blah three</li>
			<li>BLAH blah blah four</li>
			<li>BLAH blah blah five</li>
			<li>BLAH blah blah six</li>
			<li>BLAH blah blah seven</li>
			<li>BLAH blah blah eight really long example</li>
			<li>BLAH blah blah nine</li>
			<li>BLAH blah blah ten</li>
			<li>BLAH blah blah eleven</li>
			<li>BLAH blah blah twelve</li>
		<h1>Yappa Yappa</h1>

Which renders as:

Yadda Yadda

Yappa Yappa

Okay. So, multiple columns? That is what TABLE is for, but we are dealing with UL. But I have my old friend the float attribute, so I define a style sheet:

			ul.columns li {
				list-style: none;
				float: left;
				width: 30%;
			h1 { clear: left; }

Now we render as three columns:

Yadda Yadda

Yappa Yappa

Two columns? Four? Just tune the width attribute:

			ul.columns li {
				list-style: none;
				float: left;
				width: 45%;
			h1 { clear: left; }

And you get:

It is not perfect. The content renders left-to-right, so strictly speaking, these aren’t columns.

If you narrow enough to cause wrapping you get some odd gaps.

Due to margins and the like, you can’t just say three columns is 33%, two columns is 50% . . . if you narrow this page enough you’ll see a graceful degradation from more columns to fewer.

Here’s a more dynamic example, where wider pages will get more columns:

			ul.columns li {
				list-style: none;
				float: left;
				width: 15em;
			h1 { clear: left; }

Renders as:

The block following your UL will need to clear the floated content, hence the clear: left on the H1, above.

See also:

Feedback Welcome

Religion, Testimonials


Link: https://dannyman.toldme.com/2012/10/25/hajj/

“According to Islamic tradition the Kaaba was re-constructed by Abraham. It is stated in the Qur’an that this was the first house that was built for humanity to worship Allah.”

Malcolm X, an American human rights activist, describes the sociological atmosphere he experienced at Hajj as follows:

There were tens of thousands of pilgrims, from all over the world. They were of all colors, from blue-eyed blondes to black-skinned Africans. But we were all participating in the same ritual, displaying a spirit of unity and brotherhood that my experiences in America had led me to believe never could exist between the white and the non-white. America needs to understand Islam, because this is the one religion that erases from its society the race problem.

A 2008 study on the longer-term effect of participating in the Islamic pilgrimage found that Muslims’ communities become more open after the Hajj experience. Entitled “Estimating the Impact of the Hajj: Religion and Tolerance in Islam’s Global Gathering”, a study conducted in conjunction with Harvard University’s John F. Kennedy School of Government found that the Hajj experience promotes peaceful coexistence, equality, and harmony. Specifically, the report states that the Hajj “increases belief in equality and harmony among ethnic groups and Islamic community and that “Hajjis (those who have performed the Hajj) show increased belief in peace, and in equality and harmony among adherents of different religions”

Sourced from Wikipedia: Kaaba, Hajj

I kinda like just listening to the guy praying along in Arabic. Very relaxing. Even when I was a kid, I thought it was a cool idea that when Muslims pray, wherever they are, they face the same spot. Reading observations that having what amounts to a yearly conference that brings people from across the world together in fellowship . . . that is also a good thing.

Organized religion, and especially Islam, are not without some serious problems, so it is reassuring to see some of the spiritual unity and good spirit that result from a practice that so many people today and throughout history have dedicated their lives to.

Feedback Welcome

Letters to The Man, Technology, Testimonials

Advice to Hotels

Link: https://dannyman.toldme.com/2012/10/30/free-internet-duh/

From a survey I just filled out regarding a business trip to London:

Internet access … kept dropping packets, and I had to keep logging in to it via iPass. Don’t gouge customers, just let them on. This is seriously trivial, low-hanging fruit, which can make all the difference in the world esp for an international business traveler avoiding mobile roaming charges.

I would without hesitation stay at a more mediocre hotel that could deliver hassle-free, reliable Internet service, and the hassle-free starts with avoiding the damn tariff screen and just letting your guests on … guests who will appreciate this no-nonsense convenience far more than whether the staff have been properly trained to smile, &c.

I gotta say … we seem to “get this” in America … I’ve stayed at plenty of budget motels which offered complimentary, hassle-free, reliable Internet access. Though, I don’t recall having the same pleasure at a hotel in New York, where you could get free Internet in the lobby, but had to pay for it upstairs in your room.

For many of us, network access is kind of like tap water: we take it for granted that it should just flow, and not require one to jump through hoops to pay an additional $20/day. If there’s a business hotel chain that has figured this out, let me know, because my loyalty would be easily won.

Feedback Welcome

Arrr! . . . Avast!
Site Archive