horizontal column layout

[Peter Maas]

given 3 boxes, where box1 contains box2 and box3, box1.width =
box2.width + box3.width and box1.height = max(box2.height,
box3.height):

+-------------+
|+----++-----+|
|| || ||
|| || ||
|+----+| ||
| | ||
| +-----+|
+-------------+

All boxes are divs. Is it possible to do this with CSS/HTML without
using the string "table" and without using Javascript? I've tried
this with float and position:absolute for box2 or box3 but the space
of an absolutely positioned/floating box doesn't matter for the
containing box1.

--
-------------------------------------------------------------------
Peter Maas, M+R Infosysteme, D-52070 Aachen, Tel [phone]
E-mail 'cGV0ZXIubWFhc0BtcGx1c3IuZGU=\n'.decode('base64')
-------------------------------------------------------------------

[Els]

Peter Maas wrote:

given 3 boxes, where box1 contains box2 and box3, box1.width =
box2.width + box3.width and box1.height = max(box2.height,
box3.height):

+-------------+
|+----++-----+|
|| || ||
|| || ||
|+----+| ||
| | ||
| +-----+|
+-------------+

All boxes are divs. Is it possible to do this with CSS/HTML without
using the string "table" and without using Javascript? I've tried
this with float and position:absolute for box2 or box3 but the space
of an absolutely positioned/floating box doesn't matter for the
containing box1.

Correct.
You need to do it without position:absolute :-)

box2: float:left;
box3: margin-left:[width of box2];
after box3, before end of box1:
an element with 'clear:both'.
This will make box1 stretch to encompass both box2 and box3.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Dave Edmunds - Paralyzed

[Peter Maas]

Els schrieb:

Correct.
You need to do it without position:absolute :-)

box2: float:left;
box3: margin-left:[width of box2];
after box3, before end of box1:
an element with 'clear:both'.
This will make box1 stretch to encompass both box2 and box3.

Thanks! I'm trying hard to ban table based layout but I think it is
often difficult to replace table based solutions by CSS solutions.
"Difficult" in the sense that you have to use "tricks" like an
additional box with clear:both to stretch the container.

--
-------------------------------------------------------------------
Peter Maas, M+R Infosysteme, D-52070 Aachen, Tel [phone]
E-mail 'cGV0ZXIubWFhc0BtcGx1c3IuZGU=\n'.decode('base64')
-------------------------------------------------------------------

[Els]

Peter Maas wrote:

Els schrieb:

Correct.
You need to do it without position:absolute :-)

box2: float:left;
box3: margin-left:[width of box2];
after box3, before end of box1:
an element with 'clear:both'.
This will make box1 stretch to encompass both box2 and box3.

Thanks! I'm trying hard to ban table based layout but I think it is
often difficult to replace table based solutions by CSS solutions.
"Difficult" in the sense that you have to use "tricks" like an
additional box with clear:both to stretch the container.

That's only the start of all the hacks you'll need ;-)

Floats and clear properties trigger all kinds of funny happenings in
IE. Write down the term 'peek-a-boo bug' for future reference :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Squeeze - Slap And Tickle

[Johannes Koch]

Peter Maas wrote:

Els schrieb:

Correct.
You need to do it without position:absolute :-)

box2: float:left;
box3: margin-left:[width of box2];
after box3, before end of box1:
an element with 'clear:both'.
This will make box1 stretch to encompass both box2 and box3.

Thanks! I'm trying hard to ban table based layout but I think it is
often difficult to replace table based solutions by CSS solutions.

Well you could also try CSS (display: table-cell etc.) for a layout that
looks/behaves like the normal presentation of an HTML table without
misusing HTML table-related elements. But you explicitly didn't want to
use the string 'table'.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Lauri Raittila]

in comp.infosystems.www.authoring.stylesheets, Peter Maas wrote:

given 3 boxes, where box1 contains box2 and box3, box1.width =
box2.width + box3.width and box1.height = max(box2.height,
box3.height): All boxes are divs. Is it possible to do this with CSS/HTML without
using the string "table" and without using Javascript?

Easy:
div {float:left;border:solid;}
Other way (less supported):
div {display:inline-block;border:solid;vertical-align:top;}

If you have some other divs as those boxes, use different selector.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.
Support me, buy Opera:
https://secure.bmtmicro.com/opera/bu...tml?AID=882173

[Peter Maas]

Lauri Raittila schrieb:

in comp.infosystems.www.authoring.stylesheets, Peter Maas wrote:

given 3 boxes, where box1 contains box2 and box3, box1.width =
box2.width + box3.width and box1.height = max(box2.height,
box3.height):

All boxes are divs. Is it possible to do this with CSS/HTML without
using the string "table" and without using Javascript?

Easy:
div {float:left;border:solid;}

This works but then a footer div would appear at the right side
of the rightmost box. There has to be some additional stuff as
pointed out by Els.
Other way (less supported):
div {display:inline-block;border:solid;vertical-align:top;}

Thanks for the hint, never heard of inline-block. I'll look it up
at W3C.

--
-------------------------------------------------------------------
Peter Maas, M+R Infosysteme, D-52070 Aachen, Tel [phone]
E-mail 'cGV0ZXIubWFhc0BtcGx1c3IuZGU=\n'.decode('base64')
-------------------------------------------------------------------

[Peter Maas]

Johannes Koch schrieb:

Peter Maas wrote:

Thanks! I'm trying hard to ban table based layout but I think it is
often difficult to replace table based solutions by CSS solutions.

Well you could also try CSS (display: table-cell etc.) for a layout that
looks/behaves like the normal presentation of an HTML table without
misusing HTML table-related elements.

But wouldn't this mean to use a 3-stage hierarchy of display: table,
table-row and table-cell in the stylesheet? And a corresponding
div hierarchy in HTML with the same inclusion structure as with
<table>?

This looks to me like a rename-workaround to avoid committing the
"sin" of using tables for layout. Like the catholic monks in medieval
times who used to mumble "ego te baptizo carpam" to enjoy meat dishes
on fridays ;)

--
-------------------------------------------------------------------
Peter Maas, M+R Infosysteme, D-52070 Aachen, Tel [phone]
E-mail 'cGV0ZXIubWFhc0BtcGx1c3IuZGU=\n'.decode('base64')
-------------------------------------------------------------------

[Johannes Koch]

Peter Maas wrote:

But wouldn't this mean to use a 3-stage hierarchy of display: table,
table-row and table-cell in the stylesheet? And a corresponding
div hierarchy in HTML with the same inclusion structure as with
<table>?
No, not necessarily. Read about implicitly created blocks.
This looks to me like a rename-workaround to avoid committing the
"sin" of using tables for layout. Like the catholic monks in medieval
times who used to mumble "ego te baptizo carpam" to enjoy meat dishes
on fridays ;)

The purpose of table markup is not for arranging things only, but also
for making relationships explicit (headers), adding summaries for
accessibility, etc. Non-visuals tools extract information from table
markup. OTOH, the purpose of CSS table-cell etc. is just for arranging
things. That's the difference, IMHO.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)