I am currently working on a project where I am dynamically generating an outline by creating panels and labels in ASP.NET. Each node in the outline is defined by an outline number and outline text, which are obtained from a database that defines the relationship between children and parent nodes to create the outline tree structure. For each entry in the outline, I want the left div to display the outline number, and the right div to display the outline text.
The left div should have a specific minimum width, like 50px, and should expand if necessary to accommodate larger outline numbers. Sometimes the outline number might be "Section VI.", so all outline number divs should be the width of the largest required to support the largest outline number.
The right div should wrap the text if the container or window constraints prevent the text from appearing on a single 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 various combinations, but since I am new to using divs, constructing layouts has been a challenge. Most of the methods I have found are very specific to a particular layout and not easily adaptable to other designs, or they rely on specific sizes for the divs.
Since I am generating this dynamically, I do not know the amount of text that will be displayed until runtime. Therefore, using fixed sizes and absolute positioning is not a feasible option unless I perform extensive calculations and string measurements, which I am unsure how reliable that would be. I am concerned that there may be inconsistencies between the measurements done by .NET and how browsers actually render the text.
While this is not a critical requirement, using fixed sizes would prevent the text from filling new space when resizing the outer container or window. Additionally, reducing the size of the container or window may not allow the text to wrap appropriately and could result in the creation of a scroll bar instead.
Currently, I have a panel for the outline number containing a label assigned a CSS class, a separate panel for the outline text with its own CSS class, and both are placed into a panel with a dynamically set left margin based on the indentation. I can replicate almost anything shown in HTML markup using divs, but it is important to consider that the content is driven by the database and does not have a predetermined width.
If you believe that creating a two-column table for each entry is a better approach, I would appreciate hearing your opinion.
As an attempt, I explored a few different approaches:
http://www.alistapart.com/articles/holygrail/
However, I encountered issues where the outline number would wrap or overlap the other div depending on adjustments made. Ideally, the left column should expand to accommodate the content, and it should not wrap or overlap other text. It is acceptable for the indentation to vary slightly for unique cases where the outline number is too long.
Another challenge I faced was determining the font used, as it is defined in a .css file. During page load, I am uncertain how to ascertain the font to accurately measure the rendered width of the string.
One of the last methods I experimented with involved the outline number wrapping and overlapping 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 </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%;
}