Stylesheets - Slack space within line box.

Author

Slack space within line box.

Kaz Kylheku

2007-01-27, 11:02 pm

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.

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?

Jukka K. Korpela

2007-01-27, 11:02 pm

Scripsit Kaz Kylheku:

> I have a structure of three boxes contained within a box, like this:

And you multiposted your question (at least here and c.i.w.a.html). That's
_bad_. Naughty. Disruptive.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Kaz Kylheku

2007-01-27, 11:02 pm

Jukka K. Korpela wrote:
> Scripsit Kaz Kylheku:
>
>
> And you multiposted your question (at least here and c.i.w.a.html). That's
> _bad_. Naughty. Disruptive.

I canceled the posting in c.i.w.a.html, because I realized that it was
off topic there, because it's a style sheet question, not a HTML
question. Then I immediately reposted it here.

The new post may have reached your server before the cancelation of the
old post.

Thanks for your highly topical and informative reply though; my
program's layout looks better already.

Kaz Kylheku

2007-01-27, 11:02 pm

Jukka K. Korpela wrote:
> Scripsit Kaz Kylheku:
>
>
> And you multiposted your question (at least here and c.i.w.a.html). That's
> _bad_. Naughty. Disruptive.

I realized that the article didn't belong in a HTML newsgroup, so I
canceled it. Then I reposted it here. Cancelations and postings can
race ahead of each other, and perhaps not reach the same set of
servers. Ah well. I see your reply in the other newsgroup.

Alex

2007-01-27, 11:02 pm

Hi, Kaz

I had similar question in the past "Fixed and variable width boxes on
one line",
http://groups.google.com/groups/sea...ine&qt_s=Search

Here is a slightly modified version:

= = = = = = =
<html>
<head>
<style type="text/css">
<style type="text/css">

</style>
</head>

<body>

<div>
<div id="container">
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</div>
</div>

</body>

</html>
= = = = = = =

- Alex

Beauregard T. Shagnasty

2007-01-27, 11:02 pm

Alex wrote:

> Here is a slightly modified version:

Did you modify it to add the errors?

> = = = = = = =
> <html>
> <head>
> <style type="text/css"> <--- error, not needed
> <style type="text/css">
>  <-- remove HTML comment marks
> </style>
....

--
-bts
-Motorcycles defy gravity; cars just suck

John Hosking

2007-01-27, 11:02 pm

Alex wrote:
> Hi, Kaz
>
>
> Here is a slightly modified version:
>

> #two {
> background:silver;
> width: 100px;
> float: right;
> border:1px maroon solid;
> }
>
> #three {
> background:orange;
> margin-left:100px;
> margin-right:100px;
> position: relative;
> width: auto;
> border:1px maroon solid;
>
> /* Adding this tag produce unexpected spaces in IE6*/
> height: 70px;
> }

Beyond the errors already noted by BTS, we should note that the order of
your divs is different from the OP's desires. The OP said:

> I want this:
>
> [[ one ][ two ] .......... [ three ]]

Your code provides:

[[ one ][ threeeeeeeeeeeeeeee ][ two ]]

--
John

Gus Richter

2007-01-27, 11:02 pm

Alex wrote:
> Hi, Kaz
>
> I had similar question in the past "Fixed and variable width boxes on
> one line",
> http://groups.google.com/groups/sea...ine&qt_s=Search

You have to float "one", left - "three", right - and allow "two" to flow
between the others .... with css.
In the html you have to present them in this order: "one", "three" and
then "two".
Like so:

<style>
#one {float:left;}
#two {}
#three {float:right;}
..clear {clear: both;}
</style>

<div class="line">
<div class="box" id="one">one</div>
<div class="box" id="three">three<br>3.1<br>3.2</div>
<div class="box" id="two">two</div>
<br class="clear">
</div>

--
Gus

Kaz Kylheku

2007-01-27, 11:02 pm

Alex wrote:
> Hi, Kaz
>
> I had similar question in the past "Fixed and variable width boxes on
> one line",
> http://groups.google.com/groups/sea...ine&qt_s=Search
>
> Here is a slightly modified version:

None of the suggestions involving floats work properly with both IE6
and Firefox 1.0.4.

So after hours of late-night experimentation, I gave up and used
absolute positioning.

Under Firefox, the floats apparently do not participate in the height
calculation; they are treated as being outside of the normal flow. So
what happens is that the entire UI turns into a vertically-scrunched
dog's breakfast.

When you add set the height property of your line box class to be at
least as large as the tallest item in the line, then, and only then,
the display looks fine. But, if you are going to be computing the line
height yourself, you might as well then use absolute positioning.

Maybe this is fixed in some newer version of Firefox, but do you really
want to write apps that require the user to install last night's build
of the browser? :)

A part of my UI displays a Chinese character as the leftmost element in
the line box. The user can specify the size of these characters in a
selection list box in another place in the UI. So the row has to be at
least as tall as these characters for proper spacing and of course at
least as tall as the other elements.

Since I'm generating dynamic HTML, what I do is generate an in-line
style block which sets the size of these characters with the dynamic
value. And in that same block, the program calculates and spits out a
ruleset to set the line height for the rows in that section of the
document where those characters appear.

It's an ugly hack, but not a big one.

Ben C

2007-01-27, 11:02 pm

On 2007-01-12, Kaz Kylheku <kkylheku@XXXXXXXXXX> wrote:
[snip]
> None of the suggestions involving floats work properly with both IE6
> and Firefox 1.0.4.
>
> So after hours of late-night experimentation, I gave up and used
> absolute positioning.
>
> Under Firefox, the floats apparently do not participate in the height
> calculation; they are treated as being outside of the normal flow.

They participate in the height calculation of the "block formatting
context root" but not of the containing box. It's all as specified, and
you could very likely have got the effect you wanted by using "clear",
which IIRC is exactly what Jukka suggested when he first mentioned
floats, or alternatively by floating the container as well.

> Maybe this is fixed in some newer version of Firefox, but do you really
> want to write apps that require the user to install last night's build
> of the browser? :)

It's not a bug. This came up quite recently and I tried to explain it
http://tinyurl.com/yjzsc6, if you're interested.

Kaz Kylheku

2007-01-27, 11:02 pm

Ben C wrote:
> On 2007-01-12, Kaz Kylheku <kkylheku@XXXXXXXXXX> wrote:
>
> They participate in the height calculation of the "block formatting
> context root" but not of the containing box. It's all as specified, and
> you could very likely have got the effect you wanted by using "clear",
> which IIRC is exactly what Jukka suggested when he first mentioned
> floats, or alternatively by floating the container as well.

Indeed, that is exactly what I did. I added extra dummy elements in the
HTML, and style-ized them with the recommended clear. It worked on IE6.
Almost.

>
> It's not a bug. This came up quite recently and I tried to explain it
> http://tinyurl.com/yjzsc6, if you're interested.

Aha, in this thread there is a posting by Bergamont (Usenet message ID
<4vlam8F1crc2aU1@mid.individual.net> ) which points to this:
http://www.quirksmode.org/css/clearing.html

This page documents exactly the be behavior I saw at first when I
implemented the dummy clear element: the artifact of the element
causing an extra horizontal box underneath the floats, causing lots of
vertical space being added to the document. Not knowing about the
"overflow: auto;" workaround, I hacked it differently. Setting the
height of the containing box to 0 seemed to do the trick. No luck on
Firefox. Maybe this overflow:auto ; trick will work, though. I will
give the float solution another try.