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 )
  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?
Leave a comment