Can a div's width expand to fit content's width?

Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up at http://tinyurl.com/6n7czu . The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

Dave

In article
<21512612-112b-4cf6-a33c-fb4e1f4d16a3 (AT) e10g2000prf (DOT) googlegroups.com>,
Dave Rado <dave.rado (AT) dsl (DOT) pipex.com> wrote:

Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up at http://tinyurl.com/6n7czu . The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

Try changing your css to:

..BannerWidth1 {width: 11em;}

(quick fix)

--
dorayme

Hi dorayme

On 8 Apr, 23:01, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

Try changing your css to:

.BannerWidth1 {width: 11em;}

(quick fix)

No, I probably didn't explain what I'm trying to achieve very well.
I've now updated my mock-up at http://tinyurl.com/6n7czu so that it
has a width of 11em, and I've added some more text within the banner
(I've added the word "more"); but the width of the banner hasn't
increased, and the text has been forced to wrap onto a second line,
which I don't want to happen. What I want is for the banner's width to
be slightly wider than the width of the widest line of text within it
(so no unnecessary wrapping, but also no unnecessary white space), up
to a maximum width of 100%, regardless of how much text is within it.
Is that possible?

Dave

In article
<eaf7cd38-cdb8-4e7a-b5c9-bf7255887d51 (AT) w5g2000prd (DOT) googlegroups.com>,
Dave Rado <dave.rado (AT) dsl (DOT) pipex.com> wrote:

Hi dorayme

On 8 Apr, 23:01, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

Try changing your css to:

.BannerWidth1 {width: 11em;}

(quick fix)

No, I probably didn't explain what I'm trying to achieve very well.
I've now updated my mock-up at http://tinyurl.com/6n7czu so that it
has a width of 11em, and I've added some more text within the banner
(I've added the word "more"); but the width of the banner hasn't
increased, and the text has been forced to wrap onto a second line,
which I don't want to happen. What I want is for the banner's width to
be slightly wider than the width of the widest line of text within it
(so no unnecessary wrapping, but also no unnecessary white space), up
to a maximum width of 100%, regardless of how much text is within it.
Is that possible?

I widthed to suit your previous text. You have made the text more now
and of course it must wrap. So, I would think, you must increase the
width of the banner to more than 11em. The point of em widthing (which
is a unit suited to characters) is that as the characters get bigger or
smaller (think user font-size settings), so too does the box that is so
widthed.

--
dorayme

Hi dorayme

On 9 Apr, 01:10, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

You have made the text more now
and of course it must wrap.

But tables do allow one to do what I'm trying to do. I've now updated
my mock-up at http://tinyurl.com/6n7czu again, and if you look at the
second banner on the page, which is a table, if you add more text to
it, it's width does expand automatically, which is what I'm trying to
achieve (so that I don't have to have a hundreds of BannerWidthx
styles for all the different banners on my site).

The only problem with using a table in place of the DocBanner div is
that I can't see any way to apply a drop-shadow to it. Is there no
possible way to combine the two techniques, so as to get the benefits
of the table's dynamic width, while still having a drop-shadow?

Dave

In article
<ccb6e5f2-5adc-42db-9745-07d10f02d956 (AT) t54g2000hsg (DOT) googlegroups.com>,
Dave Rado <dave.rado (AT) dsl (DOT) pipex.com> wrote:

Hi dorayme

On 9 Apr, 01:10, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

You have made the text more now
and of course it must wrap.

But tables do allow one to do what I'm trying to do.

You seem to have forgotten about older query and started talking about
tables suddenly without any acknowledgement about your previous query.
Your example below gets it centred and shrunk to fit and shadowed up and
ready to go on stage to sing and dance. So why so keen on a table then?

Not that I mind table talk. Let's have some table talk now:

I've now updated
my mock-up at http://tinyurl.com/6n7czu again, and if you look at the
second banner on the page, which is a table, if you add more text to
it, it's width does expand automatically, which is what I'm trying to
achieve (so that I don't have to have a hundreds of BannerWidthx
styles for all the different banners on my site).

Well, I am sure we have discussed you using tables and I normally
approve of *you* doing this. Not many others here would, but most of
them are martians, you see... <g>

There are a number of things that are shrink-to-fit, and tables cells
have this magic property.

--
dorayme

Hi dorayme

On 9 Apr, 02:33, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

So why so keen on a table then?

I have no ideological commitment for or against tables, I simply want
to use the best tool for the job in hand.

There are a number of things that are shrink-to-fit, and tables cells
have this magic property.

Yes, but I can't work out how to apply a drop-shadow to a table whose
width is not specified. Does it require javascript to achieve this? I
know it must be possible using javascript, because I've seen
javascript-based menu systems and pop-ups that have a drop-shadow and
which automatically expand in width if one adds more text to them, but
I have no idea how they achieve this.

Dave

On 2008-04-08, Dave Rado <dave.rado (AT) dsl (DOT) pipex.com> wrote:

Hi

I've created a banner with a drop-shadow using a div - there's a mock-
up at http://tinyurl.com/6n7czu . The only problem is that the way
I've done it, I have to specify the width of the div - if I don't, it
renders with a width of 100%. Is there any way of making the width fit
the text it encloses (plus padding), and so that it expand
automatically if you add more text?

You need a shrink-to-fit container, which means a float or display:
table, table-cell or inline-block.

Most of those don't work in IE and inline-block doesn't in Firefox 2.

It looks like you also want the box centered in which case float is out.

See

http://netweaver.com.au/alt/shrinkTo...rinkToFit.html

which has a possible workaround for IE.

Hi Ben

On 9 Apr, 21:43, Ben C <spams... (AT) spam (DOT) eggs> wrote:

You need a shrink-to-fit container, which means a float or display:
table, table-cell or inline-block.

Most of those don't work in IE and inline-block doesn't in Firefox 2.

It looks like you also want the box centered in which case float is out.

See

http://netweaver.com.au/alt/shrinkTo...ingShrinkToFit....

which has a possible workaround for IE.

Yes, floats are out of the question because as you say, it needs to be
horizontally centred. It bugs me that W3C don't think the ability to
centre floats is worthwhile - it makes them seem rather out of touch,
to me.

I've got it working using tables, now - by making a table's background
colour provide the drop-shadow and then offsetting a div within the
table. It works great, but it uses two single-cell tables, one to
provide the drop-shadow with a dynamic width, with an offset div
inside that, and then a second single-celled table within that div to
provide the vertical centring. Bit clunky but it works (see my mock-up
at http://tinyurl.com/5k8hdy).

Re. the workaround you linked to for the fact that IE doesn't support
display: table, I'm not sure whether it can be made to work in this
context - part of my problem is that I don't really understand the
workaround. See my failed attempt to get it working at http://tinyurl.com/6kvjtn
, which works in Firefox but not in IE.

Can you see any way to tweak the code in my mock-up at http://tinyurl.com/6kvjtn
so that the banner looks the same as the mock-up at http://tinyurl.com/5k8hdy
in all browsers?

Dave

Dave Rado wrote:

W3C don't think the ability to
centre floats is worthwhile

Hmmm... I consider centering and floating to be 2 mutually exclusive
things. The shrink-wrapping feature of floats is all you seem interested
in. Wanting that shouldn't equate to wanting floats.

- it makes them seem rather out of touch,
to me.

They may indeed be out of touch, but not necessarily over this. I'd call
IE out of touch, for not supporting the properties that give the results
you are really after - display:table etc.

I've got it working using tables, now
at http://tinyurl.com/5k8hdy).

Are you aware that your doctype triggers quirks mode in IE6? Drop the
xml prolog.

--
Berg