How to make a multi-line div shrink to its content

Hi all,

I've got a list with 3 bullet points. Each line is only about 20
characters long. The list is left-aligned.

I want to put the list between two paragraphs, put a border around the
list (but only want the border to be as wide as the text in the list,
not the whole page width), and then center the list+border relative to
the margins of the paragraphs.

So the list itself is centered, while the list items are left-aligned.

I can't do absolute dimensions because the page has to be flexible for
localized strings.

As far as I can tell, this seems impossible to do in CSS. Am I missing
something?? Please say yes..

Thanks
michael

On 2007-10-27, crazyhorse <mjbaldwin (AT) yahoo (DOT) com> wrote:

Hi all,

I've got a list with 3 bullet points. Each line is only about 20
characters long. The list is left-aligned.

I want to put the list between two paragraphs, put a border around the
list (but only want the border to be as wide as the text in the list,
not the whole page width), and then center the list+border relative to
the margins of the paragraphs.

Do you mean horizontally centered?

So the list itself is centered, while the list items are left-aligned.

I can't do absolute dimensions because the page has to be flexible for
localized strings.

As far as I can tell, this seems impossible to do in CSS. Am I missing
something?? Please say yes..

Yes, but so are most browsers. To do that you need display: inline-block
(ideal, not supported in Firefox) or display: table (not supported in
IE).

ul
{
display: table;
margin: 0 auto;
border: 1px solid black;
}

would do it (works in most things except IE), or

ul
{
display: inline-block;
border: 1px solid black;
}

and then set text-align: center on the container (works in Opera and
Safari probably but not Firefox and almost certainly not in IE).

On Oct 27, 8:32 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:

On 2007-10-27, crazyhorse <mjbald... (AT) yahoo (DOT) com> wrote:

Hi all,

I've got a list with 3 bullet points. Each line is only about 20
characters long. The list is left-aligned.

I want to put the list between two paragraphs, put a border around the
list (but only want the border to be as wide as the text in the list,
not the whole page width), and then center the list+border relative to
the margins of the paragraphs.

Do you mean horizontally centered?

So the list itself is centered, while the list items are left-aligned.

I can't do absolute dimensions because the page has to be flexible for
localized strings.

As far as I can tell, this seems impossible to do in CSS. Am I missing
something?? Please say yes..

Yes, but so are most browsers. To do that you need display: inline-block
(ideal, not supported in Firefox) or display: table (not supported in
IE).

ul
{
display: table;
margin: 0 auto;
border: 1px solid black;
}

would do it (works in most things except IE), or

ul
{
display: inline-block;
border: 1px solid black;
}

and then set text-align: center on the container (works in Opera and
Safari probably but not Firefox and almost certainly not in IE).

Yes, I meant horizontally center.

Thank you for the help. It seems to me then that the best option is to
simply put the content in a one-celled table that doesn't specify any
dimensions and then center the table, and forget about CSS altogether
in this case -- that would work on all browsers universally, no? And I
wouldn't have to worry about "hacking" the CSS to apply differently to
different browsers?

On 2007-10-27, crazyhorse <mjbaldwin (AT) yahoo (DOT) com> wrote:

On Oct 27, 8:32 pm, Ben C <spams... (AT) spam (DOT) eggs> wrote:
On 2007-10-27, crazyhorse <mjbald... (AT) yahoo (DOT) com> wrote:
[...]
I want to put the list between two paragraphs, put a border around the
list (but only want the border to be as wide as the text in the list,
not the whole page width), and then center the list+border relative to
the margins of the paragraphs.
[...]
Yes, but so are most browsers. To do that you need display: inline-block
(ideal, not supported in Firefox) or display: table (not supported in
IE).
[...]
Thank you for the help. It seems to me then that the best option is to
simply put the content in a one-celled table that doesn't specify any
dimensions and then center the table, and forget about CSS altogether
in this case -- that would work on all browsers universally, no?

I don't know about "all browsers universally", but that probably is your
best bet if you require IE support. Unless you compromise a bit and set
an explicit width on the <ul>.

You could still use display: table. IE will probably default to display:
block, and will show the <ul> full width. That's still readable and
perfectly OK as a temporary solution until they upgrade to a more
functional browser-- it's not as if perfectly good browsers aren't
freely available for Windows.

And I wouldn't have to worry about "hacking" the CSS to apply
differently to different browsers?

I don't know. Better to avoid any hacks like that if you can.