PDA

View Full Version : CSS two-columns problem, clearly stated

bryndyment
06-18-2003, 11:56 PM
Hi,

I have two columns of unknown width*, and I want them adjacent and centered horizontally on the page. Under them, I want a caption, also centered horizontally. Like this (except also centered horizontally on the page):
ABC JKLM
DE NO
FGHI PQR

caption
Easy, right?

HOW?!?!? (It's easy with tables, of course, but I'm trying to solve this with DIVs...)

*the widths of the columns are unknown, as I'm displaying (dynamically generated) list data in each column, and can't just hardcode a width for my columns, because (a) list data doesn't seem to wrap, and (b) I don't want it to wrap anyway.
pardicity3
06-19-2003, 01:45 AM
Put all of your content in a one div. On that div have your margin-left and margin-right be set to auto. The just use text-align: center; for your caption text.
bryndyment
06-19-2003, 02:31 AM
I don't *quite* get what you're proposing. Will your solution generate two left-aligned columns? How do I specify where the column break is? Also, is it scalable to 3+ columns (although I didn't mention this in my post)?

More specifically, I'm wondering how to solve this by having each column in a separate DIV. So far, I have this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style>
div { border: solid gray 1; }
</style>
<div style="position: absolute;">
<div style="float: left;">
<ul>
<li>ABCABCABC
<li>DEDEDE
<li>FGHIFGHIFGHI
</div>
<div style="float: left;">
<ul>
<li>JKJKJK
<li>LMNOLMNOLMNO
<li>PQRPQRPQR
</div>
<div style="clear: both; text-align: center;">
caption
</div>
</div>It does everything I want (using float and clear), except the horizontal centering.
bryndyment
06-19-2003, 03:47 AM
OK, using the newly-discovered "display: inline-block" attribute, I have a solution (works in IE5.5+, but not in Netscape 6). Looks like this attribute will make it into CSS2.1.

I love it. It allows you to have block-level content within a flowed (ie., inline) element. So, in effect, the insides of this box have no effect on how the box itself flows into the document (other than the content affecting its size).

However, I'm still wondering how to solve my problem without this bleeding-edge attribute.

Anyway, here's the code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style>
div, span { border: solid gray 1; }
span { display: inline-block; text-align: left; }
</style>
<body style="text-align: center;">
<span>
<div>
<span>
<ul>
<li>ABCABCABC
<li>DEDEDE
<li>FGHIFGHIFGHI
</span>
<span>
<ul>
<li>JKJKJK
<li>LMNOLMNOLMNO
<li>PQRPQRPQR
</span>
</div>
<div style="text-align: center;">
caption
</div>
</span>
</body>
pardicity3
06-19-2003, 05:33 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style>
div { border: solid gray 1; }
div#main { margin-left: auto; margin-right: auto; border: none;}
</style>
<div id="main">
<div style="position: absolute;">
<div style="float: left;">
<ul>
<li>ABCABCABC</li>
<li>DEDEDE</li>
<li>FGHIFGHIFGHI</li>
</ul>
</div>
<div style="float: left;">
<ul>
<li>JKJKJK</li>
<li>LMNOLMNOLMNO</li>
<li>PQRPQRPQR</li>
</ul>
</div>
<div style="clear: both; text-align: center;">
caption
</div>
</div>
</div>

That should center it horizontally...it looks as though you have everything else figured out though. One last thing, don't forget to end your </li>'s and <ul>'s, it's just good practice.
bryndyment
06-19-2003, 06:00 AM
Hi,

Thanks for the reply, and the effort. It's not centering horizontally, though (Windows, IE6).

I used to close my <UL> and <LI>, but noticed that they weren't being closed in the examples in the CSS2 spec, so I left 'em out, and it still validated fine. If they're fine with that, I am (I think the reduced clutter aids in readibility). But, I can see both sides to the argument. Just a classic programmer style difference.

...Bryn.
Spookster
06-19-2003, 06:30 AM
A nice place for examples of css layout and techniques:

http://www.glish.com/css/
ronaldb66
06-19-2003, 09:16 AM
HTML 4.01 doesn't require closing tags on elements like li, ul, p, etc. All XHTML standards however do, so if you ever decide to move your documents to those specs, you can save yourself some time by starting to code well-formed right now.
Besides, I think it's just a good habit to close all container elements at all times, and personally the fact that HTML 4.01 doesn't require it really annoyes me.
pardicity3
06-19-2003, 06:37 PM
My bad, I overlooked something in your code. I didn't realize that you had your containing div set to position: absolute; Here is the revised code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style>
div {border: 1px solid gray;}
div#main { margin-left: auto; margin-right: auto; }
</style>
<div id="main">
<div style="float: left;">
<ul>
<li>ABCABCABC</li>
<li>DEDEDE</li>
<li>FGHIFGHIFGHI</li>
</ul>
</div>
<div style="float: left;">
<ul>
<li>JKJKJK</li>
<li>LMNOLMNOLMNO</li>
<li>PQRPQRPQR</li>
</ul>
</div>
<div style="clear: both; text-align: center;">
caption
</div>
</div>


Also noticed how I changed your CSS around a little. Your border declaration was out of order (it should be width (1px) style (solid) color (gray)) and you didn't specify a unit for the width. Just using 1 won't work, it needs to be 1px.
bryndyment
06-19-2003, 06:55 PM
Heh, I'm still having trouble here (Windows, IE6). The caption is expanding to the full width of the screen. I've uploaded a screenshot.
Catman
06-19-2003, 10:06 PM
That's normal div behavior when it's not floated and no width has been specified.

If you check pardicity's code in Mozilla, Netscape, and Opera, you'll see more or less the same thing.
bryndyment
06-19-2003, 10:48 PM
My understanding is, in order to make pardicity's posted code solve my problem, I'd need two things:

1. knowledge of the width of the combined columns, as the align-left/align-right: auto technique only works when a width is specified; and

2. to get around a bug in IE (ie., it not handling align-left/align-right: auto properly), take advantage of an additional bug in IE (ie., it incorrectly centers block elements with text-align) by adding an additional wrapper (or using the <body> element), and setting text-align: center in that wrapper.<style>
div { border: 1px solid gray; }
</style>
<body style="text-align: center;">
<div style="margin-left: auto; margin-right: auto; width: 400px;">
<div style="float: left; text-align: left;">
<ul>
<li>ABCABCABC</li>
<li>DEDEDE</li>
<li>FGHIFGHIFGHI</li>
</ul>
</div>
<div style="float: left; text-align: left;">
<ul>
<li>JKJKJK</li>
<li>LMNOLMNOLMNO</li>
<li>PQRPQRPQR</li>
</ul>
</div>
<div style="clear: both; text-align: center;">
caption
</div>
</div>
</body>I can live with #2, but I don't know the width of my columns, per my original problem description.

So, am I right in that there's no way to solve my original problem in CSS (aside from using CSS2.1's "display: inline-block")?