can this layout be done without tables?

[axlq]

Suppose I had to lay out a part of a page where I wanted to retain the
horizontal and vertical relationship of the elements. Yes, this is what
tables are for. I was curious if it can be done in CSS, in a way that
works across all browsers. For example:

+------------------------------------------------------+
| +--------------------------------------------+ |
| |+---------------------+ +------------------+| |
| || a block of stuff | | unknown but small|| |
| || | | width data table || |
| || | +------------------+| |
| |+---------------------+ +-------------+ | |
| | (empty space) | some small | | |
| |container is centered | block below | | |
| |horizontally regardless | the table | | |
| |of its width +-------------+ | |
| +--------------------------------------------+ |
|this container has the maximum available width |
+------------------------------------------------------+

Table layout consists of a simple 2-row, 3-cell table (with the left
cell rowspan=2), and the table is centered in the available width.

I tried to implement this using no tables, and couldn't achieve
anything that satisfied me. The lower right-hand block would always
appear in an odd place. And I ended up with a soup of divs.

I don't mind using tables for layout if I have to, but I'm always
curious about ways to avoid it if I can do so.

-A

[Tony]

axlq wrote:

Suppose I had to lay out a part of a page where I wanted to retain the
horizontal and vertical relationship of the elements. Yes, this is what
tables are for. I was curious if it can be done in CSS, in a way that
works across all browsers. For example:

+------------------------------------------------------+
| +--------------------------------------------+ |
| |+---------------------+ +------------------+| |
| || a block of stuff | | unknown but small|| |
| || | | width data table || |
| || | +------------------+| |
| |+---------------------+ +-------------+ | |
| | (empty space) | some small | | |
| |container is centered | block below | | |
| |horizontally regardless | the table | | |
| |of its width +-------------+ | |
| +--------------------------------------------+ |
|this container has the maximum available width |
+------------------------------------------------------+

This worked in IE and FF:

<div style="background-color:#ffffcc">

<div style="width:90%;margin:auto;border:solid blue 1px">

<div style="float:right;border: solid red 1px;padding: 5px;margin:
10px;">
<table style="background-color:#cccccc;border: solid green 1px">
<tr>
<td style="background-color: #ffffff">cell</td>
<td style="background-color: #ffffff">cell</td>
</tr>
<tr>
<td style="background-color: #ffffff">cell</td>
<td style="background-color: #ffffff">cell</td>
</tr>
</table>
</div>

<div style="border: solid red 1px;margin: 10px;">
The block of stuff goes here
The block of stuff goes here
The block of stuff goes here
The block of stuff goes here
</div>

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

<div style="float:right; border: solid red 1px;margin: 10px;">
Small block D
</div>

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

</div>

</div>

[axlq]

In article <12*************@corp.supernews.com>,
Tony <to****@dslextreme.WHATISTHIS.com> wrote:

axlq wrote:

Suppose I had to lay out a part of a page where I wanted to retain the
horizontal and vertical relationship of the elements. Yes, this is what
tables are for. I was curious if it can be done in CSS, in a way that
works across all browsers. For example:

+------------------------------------------------------+
| +--------------------------------------------+ |
| |+---------------------+ +------------------+| |
| || a block of stuff | | unknown but small|| |
| || | | width data table || |
| || | +------------------+| |
| || | +-------------+ | |
| |+---------------------+ | some small | | |
| | (empty space) | block below | | |
| |container centered horiz. | the table | | |
| |regardless of width +-------------+ | |
| +--------------------------------------------+ |
|this container has the maximum available width |
+------------------------------------------------------+
This worked in IE and FF:

Hmm, thanks. I guess my picture wasn't clear that the "some small
block" shouldn't necessarily start at the bottom border of the
left-hand "block of stuff" but rather immediately below the table.
So the clear=both prior to the small block shouldn't be there.
I fixed the picture in the quoted text above to correct this.

Also I wanted to avoid suggesting a width (like the 90% you used).
I needed the width to be the width of the content, centered in the
outer container. That is, the space between the outer container and
the next inner container can be zero, or even force the browser to
create a horizontal scroll bar. Is it possible to make a container
that shrinks to whatever width it contains, and then center it
within another container?
<div style="background-color:#ffffcc">

<div style="width:90%;margin:auto;border:solid blue 1px">

<div style="float:right;border: solid red 1px;padding: 5px;margin:
10px;">
<table style="background-color:#cccccc;border: solid green 1px">
<tr>
<td style="background-color: #ffffff">cell</td>
<td style="background-color: #ffffff">cell</td>
</tr>
<tr>
<td style="background-color: #ffffff">cell</td>
<td style="background-color: #ffffff">cell</td>
</tr>
</table>
</div>

<div style="border: solid red 1px;margin: 10px;">
The block of stuff goes here
The block of stuff goes here
The block of stuff goes here
The block of stuff goes here
</div>

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

<div style="float:right; border: solid red 1px;margin: 10px;">
Small block D
</div>

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

</div>

</div>

I figured it would be something like that. It seems in this case, a
table for this part of the layout is simpler:

<div style="background: #ffffcc; text-align: center">

<table style="display: inline" border=0 cellpadding=0 cellspacing=0>
<tr>
<td rowspan=2>
block of stuff goes here
</td>
<td>
<table style="background-color:#cccccc;border: solid green 1px">
<tr>
<td style="background-color: #ffffff">cell</td>
<td style="background-color: #ffffff">cell</td>
</tr>
<tr>
<td style="background-color: #ffffff">cell</td>
<td style="background-color: #ffffff">cell</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
small block
</td>
</tr>
</table>
</div>

-A

[Tony]

axlq wrote:

In article <12*************@corp.supernews.com>,
Tony <to****@dslextreme.WHATISTHIS.com> wrote:

axlq wrote:

Suppose I had to lay out a part of a page where I wanted to retain the
horizontal and vertical relationship of the elements. Yes, this is what
tables are for. I was curious if it can be done in CSS, in a way that
works across all browsers. For example:

+------------------------------------------------------+
| +--------------------------------------------+ |
| |+---------------------+ +------------------+| |
| || a block of stuff | | unknown but small|| |
| || | | width data table || |
| || | +------------------+| |
| || | +-------------+ | |
| |+---------------------+ | some small | | |
| | (empty space) | block below | | |
| |container centered horiz. | the table | | |
| |regardless of width +-------------+ | |
| +--------------------------------------------+ |
|this container has the maximum available width |
+------------------------------------------------------+
This worked in IE and FF:

Hmm, thanks. I guess my picture wasn't clear that the "some small
block" shouldn't necessarily start at the bottom border of the
left-hand "block of stuff" but rather immediately below the table.
So the clear=both prior to the small block shouldn't be there.
I fixed the picture in the quoted text above to correct this.

In that case, place the data table and the small block in the same DIV,
and float that DIV to the right
Also I wanted to avoid suggesting a width (like the 90% you used).
I needed the width to be the width of the content, centered in the
outer container.
How are you determining the width of the content? Is it an image?
Otherwise, the content will generally size to the container, wrapping as
necessary.
That is, the space between the outer container and
the next inner container can be zero, or even force the browser to
create a horizontal scroll bar. Is it possible to make a container
that shrinks to whatever width it contains, and then center it
within another container?

Although I can't recall offhand how I did it, I have done exactly that
before. (Offhand, I would say to place the content ("A Block of Stuff")
in a DIV floated left)

But that still begs the question - how will the content width be
determined, given that text will simply wrap to the container width.
What would force it to expand the container's width?

[axlq]

In article <12*************@corp.supernews.com>,
Tony <to****@dslextreme.WHATISTHIS.com> wrote:

Also I wanted to avoid suggesting a width (like the 90% you used).
I needed the width to be the width of the content, centered in the
outer container.
How are you determining the width of the content? Is it an image?

Well, the left-hand block could be an image, but the right-hand
ones are a table with text (short rows of varying widths; they fit
within 200px for an 11px font, but I'd like to avoid specifying
pixel sizes), and the small block contains a short line of text that
won't wrap (say a single word).
Otherwise, the content will generally size to the container, wrapping as
necessary.

No wrapping would happen in the instance I mentioned above.

That is, the space between the outer container and
the next inner container can be zero, or even force the browser to
create a horizontal scroll bar. Is it possible to make a container
that shrinks to whatever width it contains, and then center it
within another container?

Although I can't recall offhand how I did it, I have done exactly that
before. (Offhand, I would say to place the content ("A Block of Stuff")
in a DIV floated left)

But that still begs the question - how will the content width be
determined, given that text will simply wrap to the container width.
What would force it to expand the container's width?

Well, an image sized in pixels and some blocks sized in ems would
determine a container width that can't easily be calculated or
predicted.

-A