Side by side Divs with dynamic content

Question

I am generating an outline dynamically by creating panel and labels in ASP.NET. Each node in the outline has an outline number, and outline text, which come from a database defining nodes in a children/parent kind of structure to define the outline tree. For each entry in the outline, I'd like the left div to contain the outline number, and the right div to contain the outline text.

The left div should be some specific min width, like 50px, and should get wider if necesary to fit larger outline numbers, because occasionally the outline number might be "Section VI.". Or alternatively all outline number divs should be the width of the largest width required to support the largest outline number.

The right div should wrap the text if the constraints of the container or window prevent the text from appearing all on one line.

*--------------Window or container----------------*
|Part I.    A small amount of outline text.       |
|   Section. I  A larger amount of text is here   |
|               showing text wrapping in its own  |
|               block.                            |
|Part II.   More text here with a little wrapping |
|           going on.                             |
|Part III.  A little bit more text.               |

I have tried lots of combination. I am new to using divs, and I can't find a good methodology for constructing layouts. It seems everything I find is very specific to a certain layout and isn't really adaptable to something else, or it uses very specific sizes for the divs.

I am generating this dynamically, so it's not until runtime that I know how much text will go there. So using fixed sizes and absolute positioning is not really viable unless I were to do alot of calculations and measuring of strings, which I'm afraid of how reliable that will be. I fear I'd get done writing it and find quirks in how consistent the measurements done by .NET are versus how the browsers actually render the text.

This is not a big deal or requirement, but additionally, fixed sizes would make it so resizing the outer container or window would not allow the text to fill the new space, or when the container/window is made smaller the text will not wrap appropriately and will instead create a scroll bar.

Right now I have a panel for the outline number containing a label, and I assign the panel a Css class, and the outline text is in a seperate panel with it's own css class, and lastly the two are stuffed into a panel that has a left margin set dynamically based on the indentation. Just about anything you can show my in html markup with divs I can emulate, given that you consider that the content is database driven and thus doesn't have a predetermined width.

If you think I should just do this by creating a two column table for each entry then I'd be glad to here your opinion.

Edit: This is one approach I tried a couple different ways:

http://www.alistapart.com/articles/holygrail/

If the outline number was too long it would wrap, or it would overlap the other div, depending on how I tweaked it. Instead I'd want the left column to expand to fit the content. I couldn't find a way to tweak it to accomodate that. It's not required that all the outline numbers match up in these special cases. If the oddball has a slightly different indentation because the outline number was too long, that's ok. Just as long as the outline number doesn't wrap or overlap other text.

Edit 2: The other thing I reallized with going the route of measuring strings, is my fonts are defined by a *.css file. So during page load I'm not sure how to determine what font will be used, because that is neceary for measuring the rendered width of the string.

Edit 3: This is the last thing I tried but if the outline number is too long it wraps and than overlaps the content to the right.

<div id="container">  
  <div id="center" class="column">Application Information blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
  <div id="left" class="column">Part VVVVVVVVVVVV.</div>
</div>

#container {
  padding-left: 50px;   /* LC width */  
}

#center {
  width: 100%;  
  position: relative;
  float: left;
}

#left 
{
  position: relative;
  float: left;

  width: 50px;          /* LC width */
  right: 50px;          /* LC width */
  margin-left: -100%;
}

Answer 1

In this kind of situation, I'd actually ditch the divs.

Go with nested <dl>'s

<dl>
  <dt>Part I</dt>
  <dd>A small amount of outline text.
    <dl>
      <dt>Section I</dt>
      <dd> A larger amount of text is here
           showing text wrapping in its own
           block.</dd>
    </dl>
  </dd>
  <dt>Part II</dt>
  <dd>More text here with a little wrapping
       going on.</dd>
  <dt>Part III.</dt>
  <dd>A little bit more text.</dd>
</dl>

That will have default styling similar to what you're going for. To get the side-by-side effect, you may want to add this in your CSS:

dt { float: left; clear: left; }

That will push your dt's (titles) to the left, and allow the dd's to float to the right, but should keep your dt's from floating to the right of other dt's, keeping them separate.

Addendum:

I've revisited this, and while I haven't seen the overlapping you're getting, I've added a little bit to my CSS to show the versatility of the <dl>

CSS:

dt { float: left; clear: left; margin-right: 10px; font-weight: bold; }
dd { margin: 0; padding: 0; overflow: hidden; }

HTML:

<dl>
  <dt>Part I</dt>
  <dd>A small amount of outline text.
    <dl>
      <dt>Section I</dt>
      <dd> A larger amount of text is here
           showing text wrapping in its own
           block.</dd>
    </dl>
  </dd>
  <dt>Part II</dt>
  <dd>More text here with a little wrapping
       going on.</dd>
  <dt>Part III.</dt>
  <dd>A little bit more text.</dd>
</dl>

So, I've added a little bit of style to the <dt>'s, just to make it easier to read. But the important part is the lack of margin and padding on the <dd>, as well as overflow: hidden. The 0 margin and padding prevents oddities at small container sizes, and overflow: hidden prevents the <dd> text from wrapping under the <dt>.

Here is a jsFiddle so you can see the results immediately.