horizontal column layout

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

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.

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?

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

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