title: CSS: display:inline-block and positioning:absolute
body: <p>Please consider the following code:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt;
      &lt;style type="text/css"&gt;
          .section {
              display: block;
              width: 200px;
              border: 1px dashed blue;
              margin-bottom: 10px;
          }
          .element-left,
          .element-right-a,
          .element-right-b {
              display: inline-block;
              background-color: #ccc;
              vertical-align: top;
          }
          .element-right-a,
          .element-right-b {
              max-width: 100px;
          }
          .element-right-b {
              position: absolute;
              left: 100px;
          }
      &lt;/style&gt;
      &lt;title&gt;test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="section"&gt;
          &lt;span class="element-left"&gt;some text&lt;/span&gt;
          &lt;span class="element-right-a"&gt;some text&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="section"&gt;
          &lt;span class="element-left"&gt;some text&lt;/span&gt;
          &lt;span class="element-right-a"&gt;some more text to force line wrapping&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="section"&gt;
          &lt;span class="element-left"&gt;some text&lt;/span&gt;
          &lt;span class="element-right-b"&gt;some text&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="section"&gt;
          &lt;span class="element-left"&gt;some text&lt;/span&gt;
          &lt;span class="element-right-b"&gt;some more text to force line wrapping&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="section"&gt;
          &lt;span class="element-left"&gt;some text&lt;/span&gt;
          &lt;span class="element-right-b"&gt;some more text to force line wrapping&lt;/span&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The element with absolute positioning apparantly makes the containing box "forget" which height he needs.</p>
  
  <p>I need the absolute positioning inside the "section" box, is there another solution for this?</p>
  
  <p>thanks in advance,
  geronimo</p>
  
  <p><strong>edit</strong></p>
  
  <p>Using tables is not really an option, I need some sort of "multi-level"/"nested" layout, where the second col is always on the same position:</p>
  
  <pre>
  | some text in first column       | some text in 2nd column
    | some indented text            | 2nd column
    | also indented                 | 2nd col
      | even more indent            | 2nd column with a lot of text that
                                    |  makes it wrap
    | text                          | ...
  | blah blah                       | ...
  </pre>
  
  <p>(of course whithout the "|"s)</p>