Assigning minimal width to block-level elements

[Luke McCarthy]

Hi,

I'm trying to accomplish what I (perhaps naively) assumed would be a
relatively easy task. I am trying to center a box in the middle of the
display. That's all. Something like this here:
http://bioinfo.usask.ca/~lukem/css/

The crux of the problem I'm having is that I'm unable to stop a
block-level element from filling up the entire available width without
making it a float, and once it's a float, I'm uable to center it.

Is there a way to tell a block-level element that it should only be as
wide as it has to be? I've looked in all of the documentation I'm aware
of and I can't seem to find a way, so it seems to me that the answer is
probably no. Am I missing something?

Thanks,

Luke

[Brian]

Luke McCarthy wrote:

The crux of the problem I'm having is that I'm unable to stop a
block-level element from filling up the entire available width
Assign a width. If the box holds text, use em units to keep it
flexible. Note that, if the width is larger than the user's window,
this could result in horizontal scroll bars.

Better solution to center things is to assign equal left and right
margins. Search this group with Google; centering is a *very*
frequent topic.
Is there a way to tell a block-level element that it should only be as
wide as it has to be?

display: table-cell ;
only works in Opera afaik

--
Brian
follow the directions in my address to email me

[Erik Funkenbusch]

On Mon, 06 Oct 2003 23:30:21 GMT, Luke McCarthy wrote:

The crux of the problem I'm having is that I'm unable to stop a
block-level element from filling up the entire available width without
making it a float, and once it's a float, I'm uable to center it.
The problem you're running in to is a fundamental misunderstanding (or
non-understanding) of the CSS Box model. I'd suggest reading it pretty
carefully, since this describes in detail how items are supposed to be laid
out (bugs not withstanding).

Basically, Margin + Border + Padding + must equal the width of the
containing block. In your case, the containing block is the BODY element,
thus the content expands to the width of the body.

You need to constrain some of the attributes of the box in order to do what
you want. Either with margins, a containing div, or some other mechanism
(such as absolute or relative positioning).
Is there a way to tell a block-level element that it should only be as
wide as it has to be? I've looked in all of the documentation I'm aware
of and I can't seem to find a way, so it seems to me that the answer is
probably no. Am I missing something?

Again, you need to really understand the box model. I can't stress this
enough. It's really easy to gloss over it and think you understand. There
are some subtleties to it that aren't obvious at first.

[Erik Funkenbusch]

On Mon, 6 Oct 2003 21:06:28 -0500, Erik Funkenbusch wrote:

Basically, Margin + Border + Padding + must equal the width of the
containing block. In your case, the containing block is the BODY element,
thus the content expands to the width of the body.

That should be Margin + Border + Padding + Content must equal the width of
the containing block.

[Luke McCarthy]

In article <1n****************@funkenbusch.com>, "Erik Funkenbusch"
<er**@despam-funkenbusch.com> wrote:

Basically, Margin + Border + Padding + must equal the width of the
containing block. In your case, the containing block is the BODY
element, thus the content expands to the width of the body.

You need to constrain some of the attributes of the box in order to do
what you want. Either with margins, a containing div, or some other
mechanism (such as absolute or relative positioning).

I've tried slapping a containing div around the div I'm trying to center,
but that didn't seem to accomplish anything, as that containing div just
expanded to fill the whole page.

Setting margins or padding or making the width absolute requires that I
know how big the text inside the box is going to be in advance. In this
case, I don't. It's a dynamically generated interface and I want to
display error messages in a box. Unfortunately, the length of
those messages is going to vary and I was hoping I could vary the size of
the box as well.

Is there a way to tell a block-level element that it should only be as
wide as it has to be? I've looked in all of the documentation I'm
aware of and I can't seem to find a way, so it seems to me that the
answer is probably no. Am I missing something?

Again, you need to really understand the box model. I can't stress this
enough. It's really easy to gloss over it and think you understand.
There are some subtleties to it that aren't obvious at first.

I've read about the box model (including relevant sections of the document
at http://www.w3.org/TR/REC-CSS2/. As I said above, it doesn't seem to me
that there is a way to contstrain the width of the box based on the
required width of its content. Is that true, or is there a subtlety that
I'm missing?

Cheers,

Luke

[Brian]

Luke McCarthy wrote:

I've tried slapping a containing div around the div I'm trying to
center, but that didn't seem to accomplish anything, as that
containing div just expanded to fill the whole page.

Setting margins or padding or making the width absolute requires
that I know how big the text inside the box is going to be in
advance. In this case, I don't.
Ok. But how is a browser supposed to know how to shape the box?
Consider a paragraph of 2 lines at full width of the containing block.
If you just say, "center that," the question is, how? Make small
margins on either side, and make it 3 lines long? 4 lines long with
bigger margins?
It's a dynamically generated interface and I want to display error
messages in a box. Unfortunately, the length of those messages is
going to vary
If you know the message will only be a few words long, then test a box
with the longest message possible, using different widths set in em
units, and different font settings. Use the smallest size that will
fit that message, and set that as box width. But if that width is
large enough that it might overflow a browser window, then you'll have
to rethink things.
it doesn't seem to me that there is a way to contstrain the width
of the box based on the required width of its content. Is that
true, or is there a subtlety that I'm missing?

display: table-cell
afaik, only works in Opera.

--
Brian
follow the directions in my address to email me

[Barry Pearson]

Luke McCarthy wrote:

In article <1n****************@funkenbusch.com>, "Erik Funkenbusch"
<er**@despam-funkenbusch.com> wrote:

Basically, Margin + Border + Padding + must equal the width of the
containing block. In your case, the containing block is the BODY
element, thus the content expands to the width of the body.

You need to constrain some of the attributes of the box in order to
do what you want. Either with margins, a containing div, or some
other mechanism (such as absolute or relative positioning).

I've tried slapping a containing div around the div I'm trying to
center, but that didn't seem to accomplish anything, as that
containing div just expanded to fill the whole page.

Setting margins or padding or making the width absolute requires that
I know how big the text inside the box is going to be in advance. In
this case, I don't. It's a dynamically generated interface and I
want to display error messages in a box. Unfortunately, the length of
those messages is going to vary and I was hoping I could vary the
size of the box as well.

[snip]

I wonder if what you are doing resembles what I was trying to do?

Take this photograph page:
http://www.barry.pearson.name/photog...99_38_11_3.htm

The key bit of HTML for the photograph is:

<div class="outer">
<div class="middle">
<div class="inner"><img src="ch99_38_11_3.jpg" height="514" alt="Fashion
models, Xian, China" width="700">
</div>
</div>
</div>

I had all sorts of problems with different browers, mostly because of
limitations in IE. I wanted the inner & middle divs to "cling" to the image,
and the outer one to position them all. I ended up with:

http://www.barry.pearson.name/assets/style_eggshell.css

div.outer { display: table; width: 10%; margin-left: auto; margin-right:
auto; }

Have a look at the HTML & CSS and see if any of it works for you.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Lauri Raittila]

In article <gx********************@rwcrnsc51.ops.asp.att.net> , Brian
wrote:

Is there a way to tell a block-level element that it should only be as
wide as it has to be?

display: table-cell ;
only works in Opera afaik

display:table also works on Mozilla

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Erik Funkenbusch]

On Tue, 07 Oct 2003 15:38:28 GMT, Luke McCarthy wrote:

I've tried slapping a containing div around the div I'm trying to center,
but that didn't seem to accomplish anything, as that containing div just
expanded to fill the whole page.
Well, the containing div would have to have it's style set appropriately,
or be constrained within something else.
Setting margins or padding or making the width absolute requires that I
know how big the text inside the box is going to be in advance. In this
case, I don't. It's a dynamically generated interface and I want to
display error messages in a box. Unfortunately, the length of
those messages is going to vary and I was hoping I could vary the size of
the box as well.

Actually, you could just as easily generate the width in your
cgi/asp/php/jsp/whatever you're using via the style attribute. Count the
number of characters then add style="width:[char count] em;" to your div.
While it's not usually a good thing to mix style mechanisms, it's certainly
allowed.

You could also set the width to the largest possible text, and then center
that.

[Csaba2000]

Indeed,

For a similar situation, though very different (I'm allowed
to say that, right?), I have a hidden span. Into this I plunk
the text that I'm preparing to display, find the resultant size,
and set that as the visible div's width. Every so often there
seems to be a pixel difference in my IE 5.5 which I haven't
resolved yet, but basically the technique itself seems to
be fine for my purposes. Truly not what I wanted but IE's
resizing of narrow cells with overflow:auto set seems
questionable to me. Your milage may vary.

Csaba Gabor from New York