Two Column CSS list

I can't believe there hasn't been a post to this. There was just a newsletter about this from Builder.com's Web Development. He talked about a 3 column layout and then a 2 column one. If is pretty simple. Create 2 div's that are inside where you want them. Have the first one float right and have the other one float none. You also want to set the widths to either a static value or maybe 50% would work.

I have actually used this for a couple of site layouts lately. I like it so much better than tables.

It's my crusade to rid all of my sites of tables,

Take a look if you want, it is still under construction - http://goautosense.com/

You can definitely split your lists into a left column and a right column and it will work very well, but if you're not into manually paginating your columns you could give the lists a fixed width and float them to achieve a two-column (even a three-, four-, ..., n-column) effect.

I put up a little demo on my site:

Two-column, inline list layout using CSS

cvk
Very nice (and so simple too!). What I don't get is how you have styled all 4 divs as 'examplelist' and all therefore have a float:left. Why does the list wrap after the 2nd div and make 2 columns? It should be just a 1-column list shouldn't it? I mean, what mechanism is there in your CSS to create the 2 columns? You have specified no height restriction as far as I can see.

The examplelist divs wrap because I've given them widths of 200px and the container is about 420px wide. Using "float: left;" causes them to stack left-to-right against the left padded edge of the container. When there's no more room to stack another one across the container they have to drop down in order to continue stacking against the left margin.

Notice that the order of the examplelist divs in the HTML is:

Around the house
For work
For my car
My desk

...so they stack like this:

| Around the house   For work |
| For my car         My desk  |

It provides two columns, but the examplelist divs go left-to-right, top-to-bottom instead of the way they would if forced into two column divs (which would make it top-to-bottom, then left-to-right).

The reason it all lines up so neatly is that the first two lists have the same number of lines (not items) -- it just happened that way -- and the same is true of the last two. If that weren't the case it would still work, but there would be some extra white space below the shorter list in each pair.

OK - now I get it. You have explained that very well - and you have a simple and elegant solution to what I thought was a complex problem. This is a classic case of mindset switch from the old tables/HTML way of thinking isn't it?