Flare Sci-Fi Forums: How do I do CSS columns?

This is topic How do I do CSS columns? in forum Officers' Lounge at Flare Sci-Fi Forums.

To visit this topic, use this URL:
https://flare.solareclipse.net/ultimatebb.php/topic/10/3119.html

Posted by MinutiaeMan (Member # 444) on :

I'm currently in the process of redoing my own personal website after the resounding success of my last project.

However, I'm having a lot of trouble figuring out how to create two equal columns of content inside a larger page. For small (and equal height) blocks, I've used the FLOAT style for one and then had the other one aligned on the opposite side.

However, that's a pretty haphazard way of doing it. I've racked my brains, searched Dreamweaver's built-in "O'Reilly CSS Reference" catalogue, browsed the W3C's lengthy and jargon-filled specs pages, and searched various CSS-oriented tips sites. None of them can do what I want to do.

I've already got a similar setup in use, but that appearance is achieved using tables -- and using tables to format text is the work of the Devil himself!

Does anyone here have any clue what needs to be done?

Thanks in advance! [Smile]

Posted by Harry (Member # 265) on :

The problem is, if you start 'floating' DIVs, they can't be contained inside other DIVs.

I'm not even sure you can achieve that layout with only CSS. At least, I can't think of an easy solution right now. Hmmm.

Posted by MinutiaeMan (Member # 444) on :

Figures I'd try to do the tough techniques. [Razz]

A while back, I tried using the "display: block" style for an enclosing DIV tag, and then set the two widths. But it still wasn't working properly.

It's not a huge crisis if I can't keep that style -- if I just do a straight-down list, I can have longer descriptions. (Always look for the silver lining, I say...) But I do like having the two columns to conserve some space. And lengthy descriptions aren't all that useful -- if people want to know more about the site, they should visit the damn site rather than read about it on my page! [Wink]

Posted by Harry (Member # 265) on :

http://members.lycos.nl/harrysdump/csstest.html

But it only works in Internet Explorer. Mozilla/Phoenix (which follows the CSS specs more carefully) literally floats the DIVs and makes a mess of it.

Very strictly HTML/CSS speaking, two columns for a _list_ of links has no contextual meaning. The strictly correct way to display the links would be a UL (or possibly a DL), 'sexed up' with CSS.

Or if you want it to look the same, use tables [Smile]

Oh, and I've found a minor layout bug in tree-tech.com [Smile]

Longer topic titles disappear. This is at 1024*768.

Posted by MinutiaeMan (Member # 444) on :

Actually, I'm already using the DL (definition list) tag for my links, to separate the link title and its capsule description. Can I just apply a preference to the definition list (a tag selector) then?

Posted by Harry (Member # 265) on :

Not to make 2 columns..

Posted by Charles Capps (Member # 9) on :

CSS layoutish goodness:

http://www.bluerobot.com/web/layouts/

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

http://www.glish.com/css/

In short, you use two divs, both blocks... float one left/right as the menu, then give the other slightly more of a left/right margin as the menu is wide. Adding another column on the opposite side is just a matter of another floated block div and twiddling the margin.

http://www.glish.com/css/7.asp

^^ best example, though it uses absolute positioning for the menus.

*edit*

http://www.glish.com/css/2.asp

There's one that uses float.

Posted by Lee (Member # 393) on :

Oh, while we're at it, can anyone refer me to a nifty bit oj Javascript/DHTML that'll open a new window without toolbars, un-resizable, but with scrollbars? I had a good one but can't find it; the ones I have found don't seem to work and don't look right.