HJ Blog > Code Snippet #59: Span Alignment Puzzler

2007-01-31 18:16:53 Span Alignment Puzzler

This code produces 4 vertical bars. Each one is to the right of the last one. (Code displayed here)
( html ) ✂

<html>
    <head>
        <style type="text/css">
            .bar { background:#da5; float:left; padding:2px; margin:1px; }
        </style>
    </head>
    <body>
        <div id="timeline">
            <span class="bar" style="margin-top:  0px; height: 80px">A</span>
            <span class="bar" style="margin-top: 40px; height:120px">B</span>
            <span class="bar" style="margin-top:100px; height: 80px">C</span>
            <span class="bar" style="margin-top:140px; height:100px">D</span>
        </div>
    </body>
</html>

  1  <html>
  2      <head>
  3          <style type="text/css">
  4              .bar { background:#da5; float:left; padding:2px; margin:1px; }
  5          </style>
  6      </head>
  7      <body>
  8          <div id="timeline">
  9              <span class="bar" style="margin-top:  0px; height: 80px">A</span>
 10              <span class="bar" style="margin-top: 40px; height:120px">B</span>
 11              <span class="bar" style="margin-top:100px; height: 80px">C</span>
 12              <span class="bar" style="margin-top:140px; height:100px">D</span>
 13          </div>
 14      </body>
 15  </html>

But that's not what I was hoping for. I'd like for bars to appear in the left-most spot they have available. So the "A" would appear to the left of "B" and below "A," and "D" would be forced to remain on the furthest right, just to the right of the bottom of "B."

Is this kind of behavior possible using the standard set of CSS attributes? Or would a dynamic web page generation have to calculate where the free space is and use absolute positions?

RSS Feed for this page