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

**Jim Moe** · Jan 25 '06, 07:05 AM

Re: How to do a multicolumn layout where the columns size to fitthe contents?

Alan Silver wrote:[color=blue][color=green]
>>[/color]
> 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.
>[/color]
<http://css-discuss.incutio .com/>
<http://www.csszengarde n.com/>
<http://www.positionise verything.net/>
<http://css.maxdesign.c om.au/>

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

**Alan Silver** · Jan 26 '06, 03:35 PM

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

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.
[color=blue]
> <http://css-discuss.incutio .com/>[/color]

Great site, loads of sample, but all suffer from the problem mentioned.
[color=blue]
> <http://www.csszengarde n.com/>[/color]

Beautiful site, but almost every design fixes the font size and the
width.
[color=blue]
> <http://www.positionise verything.net/>[/color]

Also a great site, but see comments above
[color=blue]
> <http://css.maxdesign.c om.au/>[/color]

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@seies.de** · Jan 26 '06, 06:35 PM

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

Alan Silver schrieb:
[color=blue]
> <table border="0" cellpadding="0" cellspacing="0" width="100%">
> <tr>
> <td align="left" valign="top">
> <small>
> <a href="...">Ferr ets</a>
> <br><a href="...">Gibb ons</a>
> <br><a href="...">Vole s</a>
> </small>
> </td>
> <td align="left" valign="top">
> This is where the main content goes...
> </td>
> </tr>
> </table>[/color]
....[color=blue]
> 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?[/color]

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>

<div style="float: left;">
<small>
<a href="...">Ferr ets</a><br/>
<a href="...">Gibb ons</a><br/>
<a href="...">Vole s</a>
</small>
</div>

<div style="">
This is where the main content goes...
</div>

<div style="clear: both;" />
</div>
abc
[color=blue]
> TIA[/color]

Niels

**Jim Moe** · Jan 26 '06, 07:55 PM

Re: How to do a multicolumn layout where the columns size to fitthe contents?

Alan Silver wrote:[color=blue]
>
> 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.
>[/color]
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** · Jan 26 '06, 08:05 PM

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

<snip>[color=blue][color=green]
>> 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?[/color]
>
> Your table-solution doesn't fit your description, the link-column
>is maybe at about 20% for me.[/color]

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.
[color=blue]
> Try to understand floating and div and
>you get exactly what you want:[/color]
<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:ri ght;" 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** · Jan 26 '06, 09:15 PM

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

>> Thanks for your links Jim, but I've been through those already, and[color=blue][color=green]
>> 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.
>>[/color]
> Hmm. There is the float suggestion by Niels. That would work.[/color]

Unfortunately not, see my reply to him.
[color=blue]
> You could also try display: table-cell. I do not know if IE supports
>that, though.[/color]

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** · Jan 26 '06, 10:45 PM

Re: How to do a multicolumn layout where the columns size to fitthe contents?

niels.froehling @seies.de wrote:[color=blue]
>
> <!-- floating always reduces the div to the minimum needed size![/color]

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@seies.de** · Jan 26 '06, 11:25 PM

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

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

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

 
<div style="clear: both;" />
abc
</div>

Ciao
Niels

**niels.froehling@seies.de** · Jan 26 '06, 11:45 PM

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

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

**Stan McCann** · Jan 27 '06, 12:05 AM

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

Alan Silver <alan-silver@nospam.t hanx.invalid> wrote in
news:8hHV1LCNfO 2DFwD3@nospamth ankyou.spam:
[color=blue][color=green]
>> <http://css.maxdesign.c om.au/>[/color]
>
> 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.
>[/color]

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** · Jan 29 '06, 09:55 PM

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

>> It could be that CSS simply isn't up to this yet and I'm going to[color=blue][color=green]
>> have to stick with tables a while longer. If anyone has any idea,
>> please reply. TIA.
>>[/color]
>
>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.[/color]

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** · Jan 29 '06, 09:55 PM

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

>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@seies.de** · Jan 30 '06, 02:55 PM

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

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

<html>
<head>
<style type="text/css">div.colrig ht { display: table-cell; }
div.colleft { float: left; }</style>
</head>
<body>
<div>
<div class="colleft" >
<small>
<a href="...">Ferr ets</a><br/>
<a href="...">Gibb ons</a><br/>
<a href="...">Vole s</a>
</small>
</div>
<div class="colright ">
This is where the main content goes... </div>
 
<div style="clear: both;" />
</div>
</body>
</html>

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

Ciao
Niels

**Alan Silver** · Jan 30 '06, 04:45 PM

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

>Okay, here is the merge, FF table-cell, conditionally IE (only tested[color=blue]
>with 6SP1 win):[/color]

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.
[color=blue]
><html>
><head>
> <style type="text/css">div.colrig ht { display: table-cell; }
>div.colleft { float: left; }</style>
></head>
><body>
><div>
> <div class="colleft" >
> <small>
> <a href="...">Ferr ets</a><br/>
> <a href="...">Gibb ons</a><br/>
> <a href="...">Vole s</a>
> </small>
> </div>
> <div class="colright ">
> This is where the main content goes... </div>
>  
> <div style="clear: both;" />
></div>
></body>
></html>
>
>Works just fine and maybe continue working with IE7 (not Dean's :)
>
>Ciao
> Niels
>[/color]

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

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

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

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment