T O P I C ��� R E V I E W
|
MinutiaeMan
Member # 444
|
posted
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!
|
Harry
Member # 265
|
posted
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.
|
MinutiaeMan
Member # 444
|
posted
Figures I'd try to do the tough techniques.
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!
|
Harry
Member # 265
|
posted
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
Oh, and I've found a minor layout bug in tree-tech.com
Longer topic titles disappear. This is at 1024*768.
|
MinutiaeMan
Member # 444
|
posted
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?
|
Harry
Member # 265
|
posted
Not to make 2 columns..
|
Charles Capps
Member # 9
|
posted
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.
|
Lee
Member # 393
|
posted
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.
|
|