Layout question: padding within line box.

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

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>

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?

Re: Layout question: padding within line box.

Scripsit Kaz Kylheku:

Quoted text here. Click to load it

Does your actual test document contain the syntax error, too? Please post a
URL to avoid embarrassing typos that don't relate to the problem at hand.

Quoted text here. Click to load it

This is strange in two accounts:
1) You have decided to use <div> instead of <span>, and yet you declare
display: inline. What's the point? Apart from content models, the only
difference between <div> and <span> is that by default the former is
displayed as a block and the latter is displayed as inline.
2) You're setting the width, even though the property does not - by CSS
specs - apply to inline elements, and it's the display property that counts

Quoted text here. Click to load it

The simplest way is probably to remove the display setting and use

box { float: left; }
#three { float: right; }
.clear { clear: both; }

where "clear" is a class assigned to the element immediately following the
elements under discussion.

However, if the available width does not allow the boxes to be displayed at
the same line, they'll be split across two or three lines. In normal
circumstances, this is _good_ - but you haven't revealed the context at all,
so I can't tell about your actual situation.

P.S. Your question was more of a CSS question than an HTML question, right?
So it would belong to c.i.w.a.stylesheets.

Jukka K. Korpela ("Yucca")

Re: Layout question: padding within line box.

Scripsit Jukka K. Korpela:

Quoted text here. Click to load it

Aaaargh, Kaz Kylheku _multiposted_ the question. Don't do multipost, mm'kay?

Jukka K. Korpela ("Yucca")

Re: Layout question: padding within line box.

Jukka K. Korpela wrote:
Quoted text here. Click to load it

Nope. Canceled the original and reposted in the appropriate newsgroup.
I don't have access to a real news server, only Google Groups.
Otherwise I would have tried superseding the article with a different
newsgroups header.

Site Timeline