Question

I have to generate the following layout for a web site with all elements sized by their content. I can not set the width of any element – maybe of the outermost container (0) if there is no other way.

The outermost container (0) is sized by other parts of the page layout. It contains several items (1) with equal structure. The container (1) contains some small content (2) – actually it is just a number; think of it as a chapter number. To the right of this number there is the container (3) with the actual content that consists of several parts (3) to (6). Not all of the content items (4) to (6) are always present; the present content items move to the top of the container (3) so that the first present content item is right of the number (2). The content items (4) to (6) may contain long texts that mus wrap around.

Finally this whole structure is nested three times – container (6) has the same structure as container (1). In the deepest nesting level container (3) contains a possibly very wide table that must be horizontally scrollable.

 ___________________________________
|0 _______________________________  |
| |1 _____   ___________________  | |
| | |2    | |3 _______________  | | |
| | |_____| | |4              | | | |
| |         | |_______________| | | |
| |         |  _______________  | | |
| |         | |5              | | | |
| |         | |_______________| | | |
| |         |  _______________  | | |
| |         | |6              | | | |
| |         | |               | | | |
| |         | |               | | | |
| |         | |               | | | |
| |         | |_______________| | | |
| |         |___________________| | |
| |_______________________________| |
|                 .                 |
|                 .                 |
|                 .                 |
|  _______________________________  |
| |1 _____   ___________________  | |
| | |2    | |3 _______________  | | |
| | |_____| | |4              | | | |
| |         | |_______________| | | |
| |         |  _______________  | | |
| |         | |5              | | | |
| |         | |_______________| | | |
| |         |  _______________  | | |
| |         | |6              | | | |
| |         | |               | | | |
| |         | |               | | | |
| |         | |               | | | |
| |         | |_______________| | | |
| |         |___________________| | |
| |_______________________________| |
|___________________________________|

So far I tried

• a layout using DIVs but failed to position (2) and (3) side by side
• a layout using DIVs and floating left (2) and (3) but either the content of (3) floats around (2) or (3) is moved below (2) if (3) becomes to wide
• a layout using DIVs and floating left (2) and floating right (3) but then the gap between (2) and (3) may become arbitrarily wide if the content of (3) is narrow
• a layout using nested tables with two columns – one for (2) and one for (3) – but failed to constrain the width of the tables to container (0). The very wide tables in the deepest nesting level just push all the cells and tables to the right.
• a layout based on DIVs with table display styles but the browser support was to poor so a quickly gave up this idea
• a layout using ordered list as described in this CSS 2.1 12.4.1 but this will put the numbers inside (3). Further it is not guaranteed that my numbers are consecutive (but this could be fixed by explicitly setting the counters).

The final result should look like this.

1 Section Header

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur risus
  tortor, egestas id laoreet sit amet, sollicitudin nec ligula. Aliquam vitae
  justo lacus, non sagittis diam. Vestibulum ante ipsum primis in faucibus.

  1.1 Question Header

      Orci luctus et ultrices posuere cubilia Curae; Praesent eu nisi vitae
      arcu cursus lobortis vitae vitae dui. Duis imperdiet varius molestie.
      Donec ut fermentum ligula.

      1.1.1 Nunc dictum, est non vestibulum adipiscing, lacus felis commodo
            orci, in commodo nibh ante ut dolor. Quisque posuere, lacus non
            rutrum sollicitudin, lectus sem commodo tellus, at hendrerit lacus
            neque mattis risus.
             ________________________________________________________________
            |           |           |           |           |           |    |
            | Header    | Header    | Header    | Header    | Header    | Hea|
            |___________|___________|___________|___________|___________|____|                
            |           |           |           |           |           |    |
            |           |           |           |           |           |    |
            |___________|___________|___________|___________|___________|____|
            |           |           |           |           |           |    |
            |           |           |           |           |           |    |
            |___________|___________|___________|___________|___________|____|
               ____________________________________________________________
            |<|____________________________________________________________|>|

      1.1.2 Nunc dictum, est non vestibulum adipiscing, lacus felis commodo
            orci, in commodo nibh ante ut dolor. Quisque posuere, lacus non
            rutrum sollicitudin, lectus sem commodo tellus, at hendrerit lacus
            neque mattis risus.

2 Section Header

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur risus
  tortor, egestas id laoreet sit amet, sollicitudin nec ligula. Aliquam vitae
  justo lacus, non sagittis diam. Vestibulum ante ipsum primis in faucibus.

  2.1 Question Header

      Orci luctus et ultrices posuere cubilia Curae; Praesent eu nisi vitae
      arcu cursus lobortis vitae vitae dui. Duis imperdiet varius molestie.
      Donec ut fermentum ligula.

It is okay, that larger numbers push the content further to the right.

1 Section Caption
  1.1 Question Caption
10 Section Caption
   10.1 Question Caption

But aligning the content is also okay. This should be quite easy to achieve using one complex table instead of nested tables.

1  Section Caption
   1.1  Question Caption
10 Section Caption
   10.1 Question Caption

Then the numbers could also be right aligned but I think left aligned looks probably better – the lengths of the numbers don’t vary that much.

 1 Section Caption
    1.1 Question Caption
10 Section Caption
   10.1 Question Caption

So the essence of the problem is to place the elements (2) and (3) side by side and having them sized by the content. Any ideas? Semantical correct solutions using nested ordered lists preferred over DIVs and DIVs slightly preferred over tables.

Answer 1

Does this do the trick for you?

CSS

div {
    border: #000 solid 1px;
    padding: 2px;
    min-height: 20px;
    min-width: 12px;
    position: relative;
}

HTML

<div style="width:300px;">
    <div>
        <div style="position:absolute;"></div>
        <div style="margin-left:20px;">
            <div></div>
            <div></div>
            <div>
                <div style="position:absolute;"></div>
                <div style="margin-left:20px;">
                    <div></div>
                    <div></div>
                    <div>
                        <div style="position:absolute;"></div>
                        <div style="margin-left:20px;">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

You can see what this does very quickly at http://jsfiddle.net/nemophrost/Zrabg/