I have a structure of three boxes contained within a box, like this:
<div class="line">
<div class="box" id="one">one</div>
<div class="box" id="two">two</div>
<div class=box" id="three">three</div>
</div>
In the style sheet, I lay these out horizontally blocks within a line
box, say like this:
..box { display: inline; width: 10em; }
These three boxes do not fill the entire width of the containing box,
leaving a space on the right. What I would like to do is to place
..box#three all the way to the right of the containing box, and leave
the other two to the left. You know, something like using infinitely
stretchable glue in a TeX \hbox.
Instead of this:
[[ one ][ two ][ three ] .......... ]
I want this:
[[ one ][ two ] .......... [ three ]]
Using absolute positioning for .box#three is not an option, because
then its height is ignored. I still want the height of the overall box
to be calculated on all three of these elements. Sometimes box three
has extra material in it: text which wraps to several lines. If that is
ignored in the line height calculation, the box then overlaps the next
linebox below.
Ideally, I want to be able to set the width of the line box arbitrarily
without having to adjust any other number. So for instance I don't want
to stick in an invisible box of a fixed width such that the boxes
happen to add up to the total width of the containing box. Relative
positioning, simply shifting [ three ] over, won't cut it either.
In Explorer I can't even see to be able to control the width of that
box. If I set the width of <body>, or other elements, they are just
ignored: the width dynamically follows the resizing of the browser
window. On that browser, I'd like [ three ] to have right "bit
gravity": stick with the right edge of the window. Elements which are
absolutely positioned with right: 0 do behave that way.
Is there a way to attribute stretchable box such that it automatically
fills slack within a line box?
