Stylesheets - DIV that auto-sizes?

Author

DIV that auto-sizes?

Jim Moe

2005-01-29, 12:18 pm

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

2005-01-29, 12:18 pm

Jim Moe <jmm-list.AXSPAMGN@sohnen-moe.com> wrote:

> 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.

>"width:auto" does not work.

It's not supposed to.

--
Spartanicus

Ali Babba

2005-01-29, 7:19 pm

Jim Moe wrote:
> 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.
>

read a few postings back, 26 jan
http://groups-beta.google.com/group...&d#f5ab59977f6c
d143

could help you

Richard

2005-01-29, 7:19 pm

On Sat, 29 Jan 2005 08:19:27 -0700 Jim Moe wrote:

> 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.

<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

2005-01-29, 7:19 pm

"Richard" <Anonymous@127.001> wrote:
>On Sat, 29 Jan 2005 08:19:27 -0700 Jim Moe wrote:
>
>
>div#one {width:800px;}

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

2005-01-29, 7:19 pm

Steve Pugh <steve@pugh.net> writes:

> "Richard" <Anonymous@127.001> wrote:
[color=darkred]
> So width: 800px means size itself to the width of the contents? Try to
> at least read the question before posting your drivel.

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

2005-01-29, 7:19 pm

Haines Brown <brownh@teufel.hartford-hwp.com> wrote:

>Steve Pugh <steve@pugh.net> writes:
>
>
>
>But the question remains,

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).

>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.

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

2005-01-29, 7:19 pm

Haines Brown wrote:

> Steve Pugh <steve@pugh.net> writes:
>
>
>
>
>
>
> 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.
>

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

2005-01-29, 11:19 pm

Spartanicus wrote:
>
>
> The table-cell, inline-block or inline-table values for the display
> property would achieve that, browser support varies.
>
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

2005-01-29, 11:19 pm

Ali Babba wrote:
>
> read a few postings back, 26 jan
> http://groups-beta.google.com/group...h&&d#f5ab59977f
6cd143
>
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

2005-01-29, 11:20 pm

Jim Moe wrote:
> 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.

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   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

2005-01-29, 11:20 pm

On Sat, 29 Jan 2005 22:11:30 GMT Haines Brown wrote:

> Steve Pugh <steve@pugh.net> writes:

[color=darkred]
[color=darkred]
> 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.

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

2005-01-30, 7:14 am

Jim Moe <jmm-list.AXSPAMGN@sohnen-moe.com> wrote:

> 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.
>:-(

Table cells can't have margins, tables can (use display:table).

>And, of course, it looks differently in IE and Mozilla.

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

2005-01-30, 12:24 pm

In article <cumdncfAv7UdNGbcRVn-hg@giganews.com>,
Jim Moe <jmm-list.AXSPAMGN@sohnen-moe.com> wrote:
>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.

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

2005-01-30, 7:18 pm

Spartanicus wrote:
>
>
> Table cells can't have margins, tables can (use display:table).
>
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)

Alan J. Flavell

2005-01-30, 7:18 pm

On Sun, 30 Jan 2005, Jim Moe wrote:

> 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

And that's *exactly* what's wrong with using tables for layout. They
"work" - in the sense of imposing the author's idea of a suitable
layout for a limited range of browsing situations - even when that
layout is counter-productive. And browsers can't, in general, know
whether the table is meant to be expressing an inherent relationship
between the cells (in which case the best compromise may be to retain
the table layout, scrollbars and all), or merely a suggestion which
would be better ignored when the browsing situation could benefit from
that.

Jim Moe

2005-01-31, 4:44 am

Alan J. Flavell wrote:
>
>
> And that's *exactly* what's wrong with using tables for layout. They
> "work" - in the sense of imposing the author's idea of a suitable
> layout for a limited range of browsing situations - even when that
> layout is counter-productive.
>
HTML+CSS is supposed to assist in "imposing the author's idea of a
suitable layout," not prohibit it.
It is not the layout which is counter-productive; it is the lack of
multi-browser support which, I suppose, could be considered a "limited
range of browsing situations." I had no success using CSS to convince the
browsers to treat a block of formatted text (the UL) as a block.
So it came to: "Which ugly hack should I use?" I chose one that at
least conforms to (generally supported) standards rather than a
browser-specific one.

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

Alan J. Flavell

2005-01-31, 4:44 am

On Mon, 31 Jan 2005, Jim Moe wrote:

> HTML+CSS is supposed to assist in "imposing

"Proposing", yes. "Imposing", no. Confucius say "force does not work
on the WWW". (Well, he would've done, I reckon...)

> the author's idea of a suitable layout," not prohibit it.

Eh?

> It is not the layout which is counter-productive; it is the lack
> of multi-browser support

CSS is optional, by design. In situations where the proposals make no
sense (for example, text colour on a speaking browser) the CSS
proposals are going to be ignored anyway. By grasping that principle,
and capitalising on it, more-flexible and accessible web designs
emerge.

> So it came to: "Which ugly hack should I use?"

Does it? To me it comes down to "can I really risk my substantive
content to the vagaries of browser behaviour for the sake of this
particular design feature - maybe it would be safer to do without
it?".

> I chose one that at least conforms to (generally supported)
> standards

Table layout violates at least one important "standard": the WAI
guidelines.

Johannes Koch

2005-01-31, 7:27 am

Alan J. Flavell wrote:
> "Proposing", yes. "Imposing", no. Confucius say "force does not work
> on the WWW". (Well, he would've done, I reckon...)

Mr Lee or Mr Wang?

> Table layout violates at least one important "standard": the WAI
> guidelines.

In fact, WCAG 1.0 allows using HTML tables for layout unless they don't
make sense when linearized. HTML 4 says, that you should not use tables
purely for layout.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Alan J. Flavell

2005-01-31, 7:27 am

On Mon, 31 Jan 2005, Johannes Koch wrote:

>
> In fact, WCAG 1.0 allows using HTML tables for layout unless they
> don't make sense when linearized.

Let's have that in context! In fact, WCAG 1.0 section 5 says:

Tables should be used to mark up truly tabular information ("data
tables"). Content developers should avoid using them to lay out pages
("layout tables").

I think that's clear enough.

Item 5.3 conceded, at the time it was written:

5.3 Do not use tables for layout unless the table makes sense when
linearized. [...]
Note. Once user agents support style sheet positioning, tables
should not be used for layout.

Those guidelines were developed prior to their publication in May
1999. Some years have passed since then! If there's any argument to
be made, it's about the precise meaning of "Once user agents support
style sheet positioning", and whether that time has yet come.
"Positioning" in the sense of floating is surely working already, and
has been for quite some time, in browsing situations where it makes
any sense, and it does little harm in situations where it's not
supported or where it isn't helpful. "Positioning" in the sense of
precise placement on the canvas is tricky, and in the general WWW
context is best avoided anyway, IMHO.

So, I say that time is long since here, and the 1999 interim solution
is no longer appropriate (at least for new designs). YMMV.

Johannes Koch

2005-01-31, 1:14 pm

Alan J. Flavell wrote:

> Let's have that in context! In fact, WCAG 1.0 section 5 says:
>
> Tables should be used to mark up truly tabular information ("data
> tables"). Content developers should avoid using them to lay out pages
> ("layout tables").
>
> I think that's clear enough.

ACK

> Item 5.3 conceded, at the time it was written:
>
> 5.3 Do not use tables for layout unless the table makes sense when
> linearized. [...]
> Note. Once user agents support style sheet positioning, tables
> should not be used for layout.

You are right.

> Those guidelines were developed prior to their publication in May
> 1999. Some years have passed since then!

Unfortunately, some WAI people still cited this (5.3) very strongly in
February 2004 to show that WCAG 1.0 allow layout tables.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Jim Moe

2005-01-31, 7:28 pm

Alan J. Flavell wrote:
>
> "Proposing", yes. "Imposing", no. Confucius say "force does not work
> on the WWW". (Well, he would've done, I reckon...)
>
>
> Eh?
>
Hey, they are *your* words.
Once again, it is a matter of practicality, of choosing the change the
design to conform to browser limitations, or using what browsers currently
support now (and in the future) to implement the desired design.
>
>
> Table layout violates at least one important "standard": the WAI
> guidelines.

Guidelines vs standards. Hmm. . .

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

Alan J. Flavell

2005-01-31, 7:29 pm

On Mon, 31 Jan 2005, Jim Moe wrote:

>
> Guidelines vs standards. Hmm. . .

It's OK, I know what you're trying to do. A process of attrition over
terminology, in the hope of losing sight of the issue. You're doing
fine with that so far.

Try to get this straight. The only formal /standard/ you'll find,
anywhere near this context, is ISO HTML.

After that, you're left with Technical Recommendations, such as
http://www.w3.org/TR/html401/struct/tables.html

"Tables should not be used purely as a means to layout document
content" [...]

, and Guidelines such as the WAI.

Sure: in the end, it's your choice what you do with those, as an
author. And it's your readers' choice what they'll do with what you
authored. We just discuss some of the issues which might arise.