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">thre e</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.
Floating doesn't seem to do the job. Although [ three ] will move to
the right, it is not positioned as high as possible, so it looks like
this:
[[ one ][ two ] ............... ..
............... ..........[ three ]]
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?
<div class="line">
<div class="box" id="one">one</div>
<div class="box" id="two">two</div>
<div class=box" id="three">thre e</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.
Floating doesn't seem to do the job. Although [ three ] will move to
the right, it is not positioned as high as possible, so it looks like
this:
[[ one ][ two ] ............... ..
............... ..........[ three ]]
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?
Comment