By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,446 Members | 1,185 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,446 IT Pros & Developers. It's quick & easy.

Layout question: padding within line box.

P: n/a
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?

Jan 11 '07 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Scripsit Kaz Kylheku:
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>
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.
In the style sheet, I lay these out horizontally blocks within a line
box, say like this:

.box { display: inline; width: 10em; }
This is strange in two accounts:
1) You have decided to use <divinstead of <span>, and yet you declare
display: inline. What's the point? Apart from content models, the only
difference between <divand <spanis 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
here.
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.
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")
http://www.cs.tut.fi/~jkorpela/

Jan 11 '07 #2

P: n/a
Scripsit Jukka K. Korpela:
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.
Aaaargh, Kaz Kylheku _multiposted_ the question. Don't do multipost, mm'kay?

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

Jan 11 '07 #3

P: n/a
Jukka K. Korpela wrote:
Scripsit Jukka K. Korpela:
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.

Aaaargh, Kaz Kylheku _multiposted_ the question. Don't do multipost, mm'kay?
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.

Jan 12 '07 #4

This discussion thread is closed

Replies have been disabled for this discussion.