table alike lay out (two columns dynamic width)

[Roderik]

I was wondering if there is a good way to avoid a table but achieve
the following similar behaviour:

Two divs of equal height and undefined width next to each other with a
total width of 100%.
The width of the first (left) div should be the width needed to
contain its content on one line. The other div should take the rest of
the available width. Which content that comes into the first div is
not know in advance.
This can be achieved by using a table with two cells but is there a
good alternative to obtain this with divs or list markup (and the
right css obviously)?

[dorayme]

Re: table alike lay out (two columns dynamic width)

In article
<691dda27-b2b7-456a-b566-f2473251104c@8g 2000hse.googleg roups.com>,
Roderik <emmerink@gmail .comwrote:

I was wondering if there is a good way to avoid a table but achieve
the following similar behaviour:
>
Two divs of equal height and undefined width next to each other with a
total width of 100%.
The width of the first (left) div should be the width needed to
contain its content on one line. The other div should take the rest of
the available width. Which content that comes into the first div is
not know in advance.
This can be achieved by using a table with two cells but is there a
good alternative to obtain this with divs or list markup (and the
right css obviously)?

No, it is not possible in the terms you state for the simple reason that
a div is 100% wide by default. You can explore the fanciest CSS you like
for shrink to width facilities (and there are a few) but you will always
end up coming across this barrier. You need to specify a width. And you
do not know it beforehand. So that rules out HTML/CSS without scripting
help to get the width somehow. That is about width. Height is probably
even more of a problem.

The magic of tables is that all this stuff is built into the technology.
Don't give it up for less than the weightiest reasons.

--
dorayme

[Ben C]

Re: table alike lay out (two columns dynamic width)

On 2008-06-13, dorayme <doraymeRidThis @optusnet.com.a uwrote:

In article
><691dda27-b2b7-456a-b566-f2473251104c@8g 2000hse.googleg roups.com>,
Roderik <emmerink@gmail .comwrote:
>

>I was wondering if there is a good way to avoid a table but achieve
>the following similar behaviour:
>>
>Two divs of equal height and undefined width next to each other with a
>total width of 100%.
>The width of the first (left) div should be the width needed to
>contain its content on one line. The other div should take the rest of
>the available width. Which content that comes into the first div is
>not know in advance.
>This can be achieved by using a table with two cells but is there a
>good alternative to obtain this with divs or list markup (and the
>right css obviously)?

>
No, it is not possible in the terms you state for the simple reason that
a div is 100% wide by default. You can explore the fanciest CSS you like
for shrink to width facilities (and there are a few) but you will always
end up coming across this barrier. You need to specify a width. And you
do not know it beforehand. So that rules out HTML/CSS without scripting
help to get the width somehow. That is about width. Height is probably
even more of a problem.

There is a way to do it using a feature of block formatting contexts,
which is that they may become narrower due to floats in the way.

The spec says they should either become narrower or drop down. In
practice in FirefoxOperaSaf ariKonqueror, and maybe in IE who knows, they
become narrower.

The basic rule here is that *floats don't cross BFC boundaries*. By
making .right a BFC, it has to get out of the way of float .left
somehow.

But it's still a normal-flow block, so it still helps itself to as much
width as it can, which is why it extends all the way to the right.

Try this:

<style type="text/css">
div
{
border: 2px solid black;
margin: 0 2px;
}
.left { float: left }
.right { overflow: hidden }
</style>

...

<div class="left">
Shrinks to fit
</div>
<div class="right">
Takes up whatever's left
</div>

[dorayme]

Re: table alike lay out (two columns dynamic width)

In article <slrng55n67.cj2 .spamspam@bowse r.marioworld>,
Ben C <spamspam@spam. eggswrote:

On 2008-06-13, dorayme <doraymeRidThis @optusnet.com.a uwrote:

In article
<691dda27-b2b7-456a-b566-f2473251104c@8g 2000hse.googleg roups.com>,
Roderik <emmerink@gmail .comwrote:

I was wondering if there is a good way to avoid a table but achieve
the following similar behaviour:
>
Two divs of equal height and undefined width next to each other with a
total width of 100%.
The width of the first (left) div should be the width needed to
contain its content on one line. The other div should take the rest of
the available width. Which content that comes into the first div is
not know in advance....

No, it is not possible in the terms you state for the simple reason that
a div is 100% wide by default

....

Height is probably even more of a problem.

>
There is a way to do it using a feature of block formatting contexts,
which is that they may become narrower due to floats in the way.
>
The spec says they should either become narrower or drop down. In
practice in FirefoxOperaSaf ariKonqueror, and maybe in IE who knows, they
become narrower.
>
The basic rule here is that *floats don't cross BFC boundaries*. By
making .right a BFC, it has to get out of the way of float .left
somehow.
>
But it's still a normal-flow block, so it still helps itself to as much
width as it can, which is why it extends all the way to the right.
>
Try this:
>
<style type="text/css">
div
{
border: 2px solid black;
margin: 0 2px;
}
.left { float: left }
.right { overflow: hidden }
</style>
>
...
>
<div class="left">
Shrinks to fit
</div>
<div class="right">
Takes up whatever's left
</div>

I slap my forehead. I was not relating what I did know about BFC to the
situation so it was good of you to catch this.

This has given me an idea for columning where one need not specify
widths, taking care only not to bang on with long sentences in the left
column but I won't stop to go on about this.

OP's height problem is still to be solved.

--
dorayme

[Ben C]

Re: table alike lay out (two columns dynamic width)

On 2008-06-13, dorayme <doraymeRidThis @optusnet.com.a uwrote:

In article <slrng55n67.cj2 .spamspam@bowse r.marioworld>,
Ben C <spamspam@spam. eggswrote:
>

>On 2008-06-13, dorayme <doraymeRidThis @optusnet.com.a uwrote:

In article
><691dda27-b2b7-456a-b566-f2473251104c@8g 2000hse.googleg roups.com>,
Roderik <emmerink@gmail .comwrote:
>
>I was wondering if there is a good way to avoid a table but achieve
>the following similar behaviour:
>>
>Two divs of equal height and undefined width next to each other with a
>total width of 100%.

[...]

I slap my forehead. I was not relating what I did know about BFC to the
situation so it was good of you to catch this.
>
This has given me an idea for columning where one need not specify
widths, taking care only not to bang on with long sentences in the left
column but I won't stop to go on about this.

You'd need to put <brafter each sentence or put each one in its own
block.

OP's height problem is still to be solved.

He presumably wants them both the height of the one that needs the most
height. Use a table or one of those border/background tricks depending
on whether they really need to be the same height or just to look like
they are.

[dorayme]

Re: table alike lay out (two columns dynamic width)

In article <slrng570tm.2lb .spamspam@bowse r.marioworld>,
Ben C <spamspam@spam. eggswrote:

On 2008-06-13, dorayme <doraymeRidThis @optusnet.com.a uwrote:

In article <slrng55n67.cj2 .spamspam@bowse r.marioworld>,
Ben C <spamspam@spam. eggswrote:

On 2008-06-13, dorayme <doraymeRidThis @optusnet.com.a uwrote:
In article
<691dda27-b2b7-456a-b566-f2473251104c@8g 2000hse.googleg roups.com>,
Roderik <emmerink@gmail .comwrote:

I was wondering if there is a good way to avoid a table but achieve
the following similar behaviour:
>
Two divs of equal height and undefined width next to each other with a
total width of 100%.

[...]

I slap my forehead. I was not relating what I did know about BFC to the
situation so it was good of you to catch this.

There is one downside that OP might consider if he uses the
overflow:hidden on the right div: if he has images there, or generally,
if there is any content that cannot wrap like long urls, they will be
cut off. If that is remotely likely, he can use overflow: auto instead.
Or perhaps just use auto to be safe.

There is another too that may be of interest. With either hidden or
auto, if the material on the left is not pretty short, the right will be
squeezed to be easily unusuable, see what happens in Safari or FF when
the left is given more than very few words.

In other words, one can manage to get solution to OP's problem if the
case is tightly constricted.

OP's height problem is still to be solved.

>
He presumably wants them both the height of the one that needs the most
height. Use a table or one of those border/background tricks depending
on whether they really need to be the same height or just to look like
they are.

To give the appearance of equal heights, OP can wrap the two divs in a
bordered element and give the right div (judging by his post, obviously
the candidate for highest) a left border. That would mimic a one row two
cell table.

More interesting to assume that OP is not wanting a table because
material is not tabular.

But nevertheless, with a table, there is a small problem that he might
want to avoid: the sort of shrink to fit he might want might need a
nowrap in the td, otherwise even a short string of words in the left
cell would wrap too soon for his taste. With two divs side by side as we
are discussing, this allows the left to be as long as the sentence up to
the width of the body element. The right will be squeezed and will be
unusable under some circumstances. But in a table, the table always
seems to go for good sense and makes the right readable without undue
tricks.

Here is a URL that might help understand what I am saying:

<http://dorayme.890m.co m/alt/sideBySide.html >

--
dorayme

[Ben C]

Re: table alike lay out (two columns dynamic width)

On 2008-06-14, dorayme <doraymeRidThis @optusnet.com.a uwrote:

In article <slrng570tm.2lb .spamspam@bowse r.marioworld>,
Ben C <spamspam@spam. eggswrote:
>

>On 2008-06-13, dorayme <doraymeRidThis @optusnet.com.a uwrote:

In article <slrng55n67.cj2 .spamspam@bowse r.marioworld>,
Ben C <spamspam@spam. eggswrote:
>
>On 2008-06-13, dorayme <doraymeRidThis @optusnet.com.a uwrote:
In article
><691dda27-b2b7-456a-b566-f2473251104c@8g 2000hse.googleg roups.com>,
Roderik <emmerink@gmail .comwrote:
>
>I was wondering if there is a good way to avoid a table but achieve
>the following similar behaviour:
>>
>Two divs of equal height and undefined width next to each other with a
>total width of 100%.

>[...]

I slap my forehead. I was not relating what I did know about BFC to the
situation so it was good of you to catch this.

>
There is one downside that OP might consider if he uses the
overflow:hidden on the right div: if he has images there, or generally,
if there is any content that cannot wrap like long urls, they will be
cut off. If that is remotely likely, he can use overflow: auto instead.
Or perhaps just use auto to be safe.

Yes, good point.

There is another too that may be of interest. With either hidden or
auto, if the material on the left is not pretty short, the right will be
squeezed to be easily unusuable, see what happens in Safari or FF when
the left is given more than very few words.

Indeed-- that's why a table is much better for this kind of thing
in the general case (as your example also shows).

[...]

More interesting to assume that OP is not wanting a table because
material is not tabular.

In which case display: table-cell is the proper solution for data that
is not tabular but which you want displayed like a table.

Of course it doesn't work in IE but that doesn't change the principle of
the thing.