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

[Alan Silver]

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)

[Jim Moe]

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)

[Alan Silver]

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)

[niels.froehling]

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

[Jim Moe]

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)

[Alan Silver]

<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)

[Alan Silver]

>> 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)

[kchayka]

ni*************@seies.de wrote:

<!-- floating always reduces the div to the minimum needed size!

FYI, if the browser follows the CSS 2.0 spec, an explicit width is
required for non-replaced elements. It will default to 100% width if
none is specified. MacIE falls into this category. Most current browsers
follow the 2.1 spec, which allows for "shrink-wrapping".

I realize MacIE is a dead browser, but it is an exception to your
"always" rule. A graceful fallback for non-supporting browsers is always
A Good Thing.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[niels.froehling]

> 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

[niels.froehling]

No that was a too fast a shoot. ;)
Niels

[Stan McCann]

Alan Silver <al*********@nospam.thanx.invalid> wrote in
news:8h**************@nospamthankyou.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.

[Alan Silver]

>> 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.

Thanks for the reply, I was afraid this was going to be the answer.

The reason why it's such a problem is that the links can be changed at
will by the site owner, so I have no way of knowing in advance what
length the link text will be. With the table layout, this didn't matter
as the links column would just take as much space as it needed and no
more. With a CSS approach, it looks like I would have to guess, which is
a certainty that I would get it wrong fairly often!!

Thanks anyway.

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

[Alan Silver]

>No that was a too fast a shoot. ;)

Ah, that explains why it didn't work <g>

Thanks anyway.

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

[niels.froehling]

Okay, here is the merge, FF table-cell, conditionally IE (only tested
with 6SP1 win):

<html>
<head>
<style type="text/css">div.colright { display: table-cell; }
div.colleft { float: left; }</style><!--[if lt IE 7]>
<style type="text/css">div.colright { display: block; float: left;
}</style><![endif]-->
</head>
<body>
<div>
<div class="colleft">
<small>
<a href="...">Ferrets</a><br/>
<a href="...">Gibbons</a><br/>
<a href="...">Voles</a>
</small>
</div>
<div class="colright">
This is where the main content goes... </div>
&nbsp;
<div style="clear: both;" />
</div>
</body>
</html>

Works just fine and maybe continue working with IE7 (not Dean's :)

Ciao
Niels

[Alan Silver]

>Okay, here is the merge, FF table-cell, conditionally IE (only tested

with 6SP1 win):
That's great, thanks. I tested it with IE5.0 and it worked as well.

OK, one more question!! Maybe I'm asking too much now, but it is
possible to set the height of the links column to be the same as the
main content column? I would like to do this so that I can set the
background colour of the links column, and have the colour go all the
way down the page.

I tried adding "height:100%;" to the colleft style, but it didn't do
anything. I then surrounded both columns with another div, thinking that
the extra style would expand the height of colleft to the full height of
the container (ie the new div), but it didn't work.

Any ideas? Thanks a lot for the help so far.
<html>
<head>
<style type="text/css">div.colright { display: table-cell; }
div.colleft { float: left; }</style><!--[if lt IE 7]>
<style type="text/css">div.colright { display: block; float: left;
}</style><![endif]-->
</head>
<body>
<div>
<div class="colleft">
<small>
<a href="...">Ferrets</a><br/>
<a href="...">Gibbons</a><br/>
<a href="...">Voles</a>
</small>
</div>
<div class="colright">
This is where the main content goes... </div>
&nbsp;
<div style="clear: both;" />
</div>
</body>
</html>

Works just fine and maybe continue working with IE7 (not Dean's :)

Ciao
Niels

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