5 replies [Last post]
skyrocket
skyrocket's picture
Offline
Enthusiast
Sydney - Australia
Last seen: 18 years 51 weeks ago
Sydney - Australia
Timezone: GMT+10
Joined: 2003-12-18
Posts: 71
Points: 0

Hello folks,

You'd think this would be relatively easy but I can't figure out how to build a simple two-column list using XHTML/CSS. I have googled and haven't found a straightforward answer. To see what I am trying to do...

http://www.skyrocket.com.au/Concepts/Artform/tablelist.html

I have resorted to using a table to get this done - and it validates as XHTML transitional. If anyone knows a cleaner way of doing this using pure CSS I would be keen to know.

PAUL - SkyRocket Design Co
web design sydney northern beaches

LubTex
Offline
newbie
Lubbock TX
Last seen: 18 years 41 weeks ago
Lubbock TX
Timezone: GMT-6
Joined: 2004-02-26
Posts: 2
Points: 0

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, Wink

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

cvk
Offline
Regular
right behind you
Last seen: 19 years 5 weeks ago
right behind you
Timezone: GMT-5
Joined: 2003-11-06
Posts: 14
Points: 0

A second approach

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

c v k @ z y b x . c o m

skyrocket
skyrocket's picture
Offline
Enthusiast
Sydney - Australia
Last seen: 18 years 51 weeks ago
Sydney - Australia
Timezone: GMT+10
Joined: 2003-12-18
Posts: 71
Points: 0

Two Column CSS list

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.

PAUL - SkyRocket Design Co
web design sydney northern beaches

cvk
Offline
Regular
right behind you
Last seen: 19 years 5 weeks ago
right behind you
Timezone: GMT-5
Joined: 2003-11-06
Posts: 14
Points: 0

Two Column CSS list

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.

c v k @ z y b x . c o m

skyrocket
skyrocket's picture
Offline
Enthusiast
Sydney - Australia
Last seen: 18 years 51 weeks ago
Sydney - Australia
Timezone: GMT+10
Joined: 2003-12-18
Posts: 71
Points: 0

Two Column CSS list

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?

PAUL - SkyRocket Design Co
web design sydney northern beaches