How to do a multicolumn layout where the columns size to fit the contents?

Hello,

Sorry if this is covered somewhere, but I've looked at countless sites
explaining how to do multicolumn layouts in CSS, but have yet to find
one that does what I want.

In the old days, I would use something like this (deliberately small
fragment of air code, so no comments about validity please!!) to produce
a two-column layout, where the left column was (say) for site links...

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left" valign="top">
<small>
<a href="...">Ferrets</a>
<br><a href="...">Gibbons</a>
<br><a href="...">Voles</a>
</small>
</td>
<td align="left" valign="top">
This is where the main content goes...
</td>
</tr>
</table>

The advantage of this is that the left column would only be wide enough
to fit the links, and the right column would expand to fill the rest of
the window (assuming it had enough content of course).

I have been looking to do such a layout in CSS, but can't see how. All
the examples I've seen use DIVs for the columns, and float them. They
set the width of the left DIV either as a fixed value in pixels, ems,
etc, or as a percentage. Either way, the left column's width is
independent of the contents. If the text of the links are all short,
then you waste space in the left column. If there are long texts, they
overflow the DIV and spill into the right column.

Is there any way to set it so that the left column is only as wide as
needed by the contents, and the right one uses the rest? As I said, I've
searched and searched, I've followed loads of links from posts in this
group, but I've yet to find a layout that is as flexible as the old
table one. I would be very grateful if anyone can point me in the right
direction.

TIA

--
Alan Silver
(anything added below this line is nothing to do with me)

Alan Silver wrote:

The advantage of this is that the left column would only be wide enough
to fit the links, and the right column would expand to fill the rest of
the window (assuming it had enough content of course).

I have been looking to do such a layout in CSS, but can't see how. All
the examples I've seen use DIVs for the columns, and float them. They
set the width of the left DIV either as a fixed value in pixels, ems,
etc, or as a percentage. Either way, the left column's width is
independent of the contents. If the text of the links are all short,
then you waste space in the left column. If there are long texts, they
overflow the DIV and spill into the right column.

http://css-discuss.incutio.com/

<http://www.csszengarden.com/>
<http://www.positioniseverything.net/>
<http://css.maxdesign.com.au/>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Hmm, it seems my reply of two days ago never made it into the newsgroup.
Here goes for a second try...


Thanks for your links Jim, but I've been through those already, and
unless I missed one, none of them do what I want. They all have either
fixed width, or a fixed percentage. I'm looking for a way to have the
left column (DIV) only take as much space as the contents need, and have
the right column take the rest.

If I missed a sample that does that, please could you provide a more
specific link as I couldn't see one.

http://css-discuss.incutio.com/

Great site, loads of sample, but all suffer from the problem mentioned.

http://www.csszengarden.com/

Beautiful site, but almost every design fixes the font size and the
width.

http://www.positioniseverything.net/

Also a great site, but see comments above

http://css.maxdesign.com.au/

I presume you were referring to the floatutorial. Again, AFAICS, no
example of automatic sizing.

It could be that CSS simply isn't up to this yet and I'm going to have
to stick with tables a while longer. If anyone has any idea, please
reply. TIA.

--
Alan Silver
(anything added below this line is nothing to do with me)

Alan Silver schrieb:

table border="0" cellpadding="0" cellspacing="0" width="100%"
tr
td align="left" valign="top"
small
a href="...">Ferrets</a
br><a href="...">Gibbons</a
br><a href="...">Voles</a
/small
/td
td align="left" valign="top"
This is where the main content goes...
/td
/tr
/table
....
Is there any way to set it so that the left column is only as wide as
needed by the contents, and the right one uses the rest?

Your table-solution doesn't fit your description, the link-column
is maybe at about 20% for me. Try to understand floating and div and
you get exactly what you want:

<div>
<!-- floating always reduces the div to the minimum needed size! it's
automatically 'display: inline;' -->
<div style="float: left;">
<small>
<a href="...">Ferrets</a><br/>
<a href="...">Gibbons</a><br/>
<a href="...">Voles</a>
</small>
</div>
<!-- nothing always expands the div to the maximum available size!
that is the default behaviour of every unstyled div -->
<div style="">
This is where the main content goes...
</div>
<!-- stop making garbage with the following content -->
<div style="clear: both;" />
</div>
abc

TIA

Niels

Alan Silver wrote:

Thanks for your links Jim, but I've been through those already, and
unless I missed one, none of them do what I want. They all have either
fixed width, or a fixed percentage. I'm looking for a way to have the
left column (DIV) only take as much space as the contents need, and have
the right column take the rest.

Hmm. There is the float suggestion by Niels. That would work.

You could also try display: table-cell. I do not know if IE supports
that, though.


--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

<snip>

Is there any way to set it so that the left column is only as wide as
needed by the contents, and the right one uses the rest?

Your table-solution doesn't fit your description, the link-column
is maybe at about 20% for me.

If you add more text to the main content part then it will shrink the
link column down to just the size needed. I didn't bother adding that
in, so as not to fill the post with unnecessary text.

Try to understand floating and div and
you get exactly what you want:
snip

Thanks for the sample, it isn't bad, but isn't actually what I wanted.

The sample I posted (with the table) would have a left column that is as
long as the right column. The one you posted floats the left column at
the top left of the containing DIV, allowing the contents of the main
column to expand out under the links. I was looking for something that
would mimic the table layout, where the two columns fill the full
vertical space used.

I tried adding style="float:right;" to the main content div, which gave
something a lot closer to what I wanted in IE, but put the div *below*
the links on in Firefox, so still no joy ;-(

Thanks for the reply. If you have any further suggestions, please do so.

--
Alan Silver
(anything added below this line is nothing to do with me)

Thanks for your links Jim, but I've been through those already, and
unless I missed one, none of them do what I want. They all have either
fixed width, or a fixed percentage. I'm looking for a way to have the
left column (DIV) only take as much space as the contents need, and have
the right column take the rest.

Hmm. There is the float suggestion by Niels. That would work.

Unfortunately not, see my reply to him.

You could also try display: table-cell. I do not know if IE supports
that, though.

I just did a quick search, and apparently it doesn't.

Thanks for the reply anyway. Any further suggestions greatly welcome.

--
Alan Silver
(anything added below this line is nothing to do with me)

I tried adding style="float:right;" to the main content div, which gave
something a lot closer to what I wanted in IE, but put the div *below*
the links on in Firefox, so still no joy ;-(

<div>
<div style="float: left;">
Menu
</div>
<div style="float: right;">
This is where the main content goes...
This is where the main content goes...
</div>
<!-- this little space works wonders ;-) you can
even setup 'font-size: 1px;' for making it smaller
or using another element -->
&nbsp;
<div style="clear: both;" />
abc
</div>

Ciao
Niels

No that was a too fast a shoot.
Niels

Alan Silver <alan-silver (AT) nospam (DOT) thanx.invalid> wrote in
news:8hHV1LCNfO2DFwD3 (AT) nospamthankyou (DOT) spam:

http://css.maxdesign.com.au/

I presume you were referring to the floatutorial. Again, AFAICS, no
example of automatic sizing.

It could be that CSS simply isn't up to this yet and I'm going to
have to stick with tables a while longer. If anyone has any idea,
please reply. TIA.

I have also fought with this one and haven't found a way to do what you
are referring to except for the use of em references. The only way
I've found is to determine the content width of the left column in ems,
then set the width using ems and set the margin of the right column
also using ems. It's not automatic sizing, but it is based upon your
content changing size with font changes.

I know it's not exactly what you're looking for but I do hope this
helps.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
http://alamo.nmsu.edu/ There are 10 kinds of people.
Those that understand binary and those that don't.