Hello!

I have a category listing of all my entries.  see here

I’m changing it so it’s a bit more descriptive, but what I really would like to do is display it in 2 columns.

So instead of the current layout:

blah
blah
blah
blah
blah
blah

I would have something like:

blah…........blah
blah…........blah
blah…........blah

(imagine no ...... that would just be space)

I can’t even begin to think how I would do this.  Any suggestions?

TIA,

Bill

Is it:

blah1 .... blah2
blah3 .... blah4

or

blah1 .... blah3
blah2 ... blah4

that you want?

the second one is a lot easier than the first. =)

Wouldn’t the first one be easier? 

I was just thinking of one column going down 1 2 3 4 and then a second column going down 5 6 7 8 using offset.  How would you do that in the first option?

Hiya LisaJill!

Thanks for the quick reply.  Either would work…it’s asthetic, so I guess the second one would be great.

Thanks!  *fingers crossed*

You could just have each entry as block elements but styled as inline with a fixed width and they will just fill up the space until they have to go to the next >line< of your space. Just like inline images. I guess this might not display as intended if the elements are different heights.

I didn’t even think of offset. That would work. There might still be a layout problem if the entries are different heights though. i thought you had some magical formula to make content flow vertically from one column to the next and I wanted to know

There is a good newspaper style layout here, done in EE. Haven’t dissected it but I think its a very successful layout. Not sure if newspaper style is what you’re after.

Arghh! I just realised I didn’t read your post properly and you are talking about category headings and not entries.

i thought Lisa-Jill had some magical formula to make content flow vertically from one column to the next and I wanted to know

However, you could just have each list item styled as inline with a fixed width container and they will just fill up the space until they have to wrap. Just like inline images. Just add display: inline to your styles. You should also set the <li> elements to fixed width so the ‘columns’ line up.  I guess this might not display exactly as intended if the elements are different heights (if you had a long category name that wrapped for example).

I didn’t even think of offset. That would work. There might still be a layout problem if the elements are different heights though.

ah.

I googled css inline, and css offset, but I wasn’t able to grok the way to do this….any other sites you could point me to, or perhaps a code snipet?

Tia,

Bill

I was actually thinking of the offset with the exp:weblog:entries tag - I thought you wanted this with posts, not with the category listing, as I read the title not the content (sorry ;p).  You want this with the listing of entries in each category? which tag/code are you talking about specifically?

Random Thoughts...
Not being a programmer I can’t actually do it but these came to mind…
—————
The International Herald Tribune (pick an article) has a famous 3-column layout where the text flows from one col. to the next. It also senses your screen size and paginates the article. It’s all done with Javascript and if you search the net, the original developer has a tutorial on how he did it.
—————
Through php/query (or whatever means) get a count total, split it. Have two different css Divs where one is left, the other is either offset right or floated. The first div gets assigned and each entry is counted, when the count hits the magic halfway point it closes the first style and applies the second. Of course the code would have to account for an uneven total. You would probably be better off with the float as it would adjust when someone increased the text size.
—————
Good luck

Here’s the actual code I’m using to grab the entry titles:

Ah, ok.  You can set up the table code so that each entry appears inside it’s own cell going downward pretty easily (though I haven’t done this, it should just be a matter of where you put the table code).  So, add a limit=“4” for one - then in the next column over use the same code but add an offset=“4” (or however many your limit is) so that it starts at the next entry.

Does that make sense?

Ok I thought about this, and here’s just one of many solutions possible for this.

Here’s my actual EE code:

Now, you’ll need to set up the CSS as follows for the style1 and style2:

What this will result in is:

title1…title2
title3…title4
title5…title6

Well you get the idea. It looks pretty good, I think. but again, this is only 1 way of doing things, and using just divs.

hrm, I never thought of switch. *blushes*

Heheh yeah. Lynda taught me a while ago to use what’s there first before messing with the code. hehe.

Yoshi, that’s great…It’s a perfect example of the “keep it simple” rule…This will come in handy

yeah, sometimes the best solutions are the simple ones. unfortunately the simple ones sometimes never occur to anyone for a while.

@Yoshi

Wow! Thanks.

Anytime, I’m glad that I was actually able to help