DIV that auto-sizes?

[Jim Moe]

Hello,
Is there a way to have a div size itself to the width of its contents?
"width:auto " does not work.
The div contains a UL and I want the div to fit the longest line in the
list. The div is centered.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Spartanicus]

Re: DIV that auto-sizes?

Jim Moe <jmm-list.AXSPAMGN@s ohnen-moe.com> wrote:
[color=blue]
> Is there a way to have a div size itself to the width of its contents?[/color]

The table-cell, inline-block or inline-table values for the display
property would achieve that, browser support varies.
[color=blue]
>"width:auto " does not work.[/color]

It's not supposed to.

--
Spartanicus

[Ali Babba]

Re: DIV that auto-sizes?

Jim Moe wrote:[color=blue]
> Hello,
> Is there a way to have a div size itself to the width of its contents?
> "width:auto " does not work.
> The div contains a UL and I want the div to fit the longest line in
> the list. The div is centered.
>[/color]


read a few postings back, 26 jan

http://groups-beta.google.com/group/comp.infosystems.www.authoring.stylesheets/browse_frm/thread/441fb553016b833d/f5ab59977f6cd143?q=re:+center+div%3F+ali+babba&_done=%2Fgroups%3Fq%3Dre:+center+div%3F+ali+babba%26&_doneTitle=Back+to+Search&&d#f5ab59977f6cd143

could help you

[Richard]

Re: DIV that auto-sizes?

On Sat, 29 Jan 2005 08:19:27 -0700 Jim Moe wrote:
[color=blue]
> Hello,
> Is there a way to have a div size itself to the width of its
> contents?
> "width:auto " does not work.
> The div contains a UL and I want the div to fit the longest line in
> the
> list. The div is centered.[/color]


<div id="one">
<ul>
<li><div id="two"><text> </div></li>
</ul>
</div>

div#one {width:800px;}
div#two {width:100%; text-align:center;}

Division one is the container for your UL.
Division two is set at 100% so it will also be 800px wide.
To indent a little: div#two { margin-left:5%; width:95%;}
To center it div#two {margin-left:5%; margin-right:5% width:90%;}
And of course, div#two {margin:5%; width:90%}

[Steve Pugh]

Re: DIV that auto-sizes?

"Richard" <Anonymous@127. 001> wrote:[color=blue]
>On Sat, 29 Jan 2005 08:19:27 -0700 Jim Moe wrote:
>[color=green]
>> Is there a way to have a div size itself to the width of its
>> contents?[/color]
>
>div#one {width:800px;}[/color]

So width: 800px means size itself to the width of the contents? Try to
at least read the question before posting your drivel.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[Haines Brown]

Re: DIV that auto-sizes?

Steve Pugh <steve@pugh.net > writes:
[color=blue]
> "Richard" <Anonymous@127. 001> wrote:[color=green]
> >On Sat, 29 Jan 2005 08:19:27 -0700 Jim Moe wrote:
> >[color=darkred]
> >> Is there a way to have a div size itself to the width of its
> >> contents?[/color][/color][/color]
[color=blue]
> So width: 800px means size itself to the width of the contents? Try to
> at least read the question before posting your drivel.[/color]

But the question remains, and for me is an interesting one, although
in my case, I'd like the div vertical size to adjust itself to the
amount of a fixed-width text, so that if more text is entered, the
vertical size of the div will increase.

--
Haines Brown

[Steve Pugh]

Re: DIV that auto-sizes?

Haines Brown <brownh@teufel. hartford-hwp.com> wrote:
[color=blue]
>Steve Pugh <steve@pugh.net > writes:
>[color=green]
>> "Richard" <Anonymous@127. 001> wrote:[color=darkred]
>> >On Sat, 29 Jan 2005 08:19:27 -0700 Jim Moe wrote:
>> >
>> >> Is there a way to have a div size itself to the width of its
>> >> contents?[/color][/color]
>[color=green]
>> So width: 800px means size itself to the width of the contents? Try to
>> at least read the question before posting your drivel.[/color]
>
>But the question remains,[/color]

As other people have said there are several ways to create 'shrink to
fit' blocks in CSS. CSS tables are the best way but IE doesn't support
them. Under CSS 2.1 floats also behave like this but not under CSS 2
(and Mac IE follows the CSS 2 rules).
[color=blue]
>and for me is an interesting one, although
>in my case, I'd like the div vertical size to adjust itself to the
>amount of a fixed-width text, so that if more text is entered, the
>vertical size of the div will increase.[/color]

Um, that's the default.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[Ali Babba]

Re: DIV that auto-sizes?

Haines Brown wrote:
[color=blue]
> Steve Pugh <steve@pugh.net > writes:
>
>[color=green]
>>"Richard" <Anonymous@127. 001> wrote:
>>[color=darkred]
>>>On Sat, 29 Jan 2005 08:19:27 -0700 Jim Moe wrote:
>>>
>>>
>>>> Is there a way to have a div size itself to the width of its
>>>>contents?[/color][/color]
>
>[color=green]
>>So width: 800px means size itself to the width of the contents? Try to
>>at least read the question before posting your drivel.[/color]
>
>
> But the question remains, and for me is an interesting one, although
> in my case, I'd like the div vertical size to adjust itself to the
> amount of a fixed-width text, so that if more text is entered, the
> vertical size of the div will increase.
>[/color]

is this a jukebox or what ?! apparently it is. as i just said, the
solution was given just 3 days ago. so for the very hesitating or simply
mentally poor, follow the link, and check post #26 (in google numbering)

[Jim Moe]

Re: DIV that auto-sizes?

Spartanicus wrote:[color=blue]
>[color=green]
>> Is there a way to have a div size itself to the width of its contents?[/color]
>
> The table-cell, inline-block or inline-table values for the display
> property would achieve that, browser support varies.
>[/color]
Only by setting both the div and ul to display:table-cell did the
shrink to fit work. Only now the div completely ignores the margin:auto.
:-( And, of course, it looks differently in IE and Mozilla.

Demo URL: <http://www.sohnen-moe.com/test/test.html>


--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Jim Moe]

Re: DIV that auto-sizes?

Ali Babba wrote:[color=blue][color=green]
>> Is there a way to have a div size itself to the width of its
>> contents? "width:auto " does not work.
>> The div contains a UL and I want the div to fit the longest line in
>> the list. The div is centered.[/color]
>
> read a few postings back, 26 jan
> http://groups-beta.google.com/group/...ab59977f6cd143
>[/color]
Yes, I saw that. It does not work for a contained UL.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Uncle Pirate]

Re: DIV that auto-sizes?

Jim Moe wrote:[color=blue]
> Only by setting both the div and ul to display:table-cell did the
> shrink to fit work. Only now the div completely ignores the margin:auto.
> :-( And, of course, it looks differently in IE and Mozilla.[/color]

Try text-align:center on a container instead of margin:auto on the div.
You've changed the div from block to in-line and they work
differently. You might try putting &nbsp; around the element if it
doesn't respond to the text-align:center.

We'll never get past the IE/other thing though.

--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
'94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
A zest for living must include a willingness to die. - R.A. Heinlein

[Richard]

Re: DIV that auto-sizes?

On Sat, 29 Jan 2005 22:11:30 GMT Haines Brown wrote:
[color=blue]
> Steve Pugh <steve@pugh.net > writes:[/color]
[color=blue][color=green]
>> "Richard" <Anonymous@127. 001> wrote:[color=darkred]
>> >On Sat, 29 Jan 2005 08:19:27 -0700 Jim Moe wrote:
>> >
>> >> Is there a way to have a div size itself to the width of its
>> >> contents?[/color][/color][/color]
[color=blue][color=green]
>> So width: 800px means size itself to the width of the contents? Try to
>> at least read the question before posting your drivel.[/color][/color]
[color=blue]
> But the question remains, and for me is an interesting one, although
> in my case, I'd like the div vertical size to adjust itself to the
> amount of a fixed-width text, so that if more text is entered, the
> vertical size of the div will increase.[/color]

Do not define a height for either division.
Although you can define a height for div#two initially. Just to show
something.
The height will automatically adjust as needed.
If you have nothing in the division to begin with, the division will appear
to be nonexistant.
As soon as something is in it, it expands as needed.
The width remains the same as you have defined that.

[Spartanicus]

Re: DIV that auto-sizes?

Jim Moe <jmm-list.AXSPAMGN@s ohnen-moe.com> wrote:
[color=blue][color=green][color=darkred]
>>> Is there a way to have a div size itself to the width of its contents?[/color]
>>
>> The table-cell, inline-block or inline-table values for the display
>> property would achieve that, browser support varies.
>>[/color]
> Only by setting both the div and ul to display:table-cell did the
>shrink to fit work. Only now the div completely ignores the margin:auto.
>:-([/color]

Table cells can't have margins, tables can (use display:table).
[color=blue]
>And, of course, it looks differently in IE and Mozilla.[/color]

The only way around that is to code it as an inline-block for IE, and a
css table for proper browsers:

http://www.spartanicus.utvinternet.ie/test/jim.htm

--
Spartanicus

[Mark Carroll]

Re: DIV that auto-sizes?

In article <cumdncfAv7UdNG bcRVn-hg@giganews.com >,
Jim Moe <jmm-list.AXSPAMGN@s ohnen-moe.com> wrote:[color=blue]
>Hello,
> Is there a way to have a div size itself to the width of its contents?
>"width:auto " does not work.
> The div contains a UL and I want the div to fit the longest line in the
>list. The div is centered.[/color]

I've not tried grappling with ULs like that, but with headings I find
things like width: 0em; white-space: nowrap; will usually do what I
want in IE6 and Firefox.

-- Mark

[Jim Moe]

Re: DIV that auto-sizes?

Spartanicus wrote:[color=blue]
>[color=green][color=darkred]
>>>> Is there a way to have a div size itself to the width of its contents?
>>>
>>>The table-cell, inline-block or inline-table values for the display
>>>property would achieve that, browser support varies.
>>>[/color]
>> Only by setting both the div and ul to display:table-cell did the
>>shrink to fit work. Only now the div completely ignores the margin:auto.[/color]
>
> Table cells can't have margins, tables can (use display:table).
>[/color]
display:table works quite nicely with Mozilla. Not IE, as you noted.
Your suggestion of special IE conditionals is an interesting workaround
to the browser's limitations. One I am not willing to have cluttering my
pages.
So I have decided, "Screw the Purity Of Essence, I am using a table for
layout." A table is standard, and it works for existing browsers (IE, Moz,
Opera). In 10 years when IE catches up to trailing edge tech and IE6 is
hardly used, I'll remove the table.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)