div as small as possible

usually i don't care... but if I use script.aculo.us, there is a
Draggable class to use so that I can drag the div around...

so the div turns out to enclose the max width across the screen. it
can make the Draggable a bit weird if I just want a small area to be
included -- one small element can overlap the other ones easily as the
div is "max width"

so I wonder, can I set the div to be "as small as possible", just to
contain the elements inside but not more.

I tried using width: auto and it wouldn't work. setting width to a
small number like 30px seems to work alright, except it maybe better
to let it just enclosed the elements inside but not more.

On 2007-10-29, Summercool <Summercoolness (AT) gmail (DOT) com> wrote:

usually i don't care... but if I use script.aculo.us, there is a
Draggable class to use so that I can drag the div around...

so the div turns out to enclose the max width across the screen. it
can make the Draggable a bit weird if I just want a small area to be
included -- one small element can overlap the other ones easily as the
div is "max width"

so I wonder, can I set the div to be "as small as possible", just to
contain the elements inside but not more.

I tried using width: auto and it wouldn't work. setting width to a
small number like 30px seems to work alright, except it maybe better
to let it just enclosed the elements inside but not more.

You need an element whose auto width is shrink-to-fit. That's anything
with position: absolute or fixed, or that's floated, or display:
table-cell or table.

Not completely sure exactly what you're doing, but position: absolute
with width: auto (the default) sounds like the most appropriate.

On Oct 29, 3:47 am, Ben C <spams... (AT) spam (DOT) eggs> wrote:

You need an element whose auto width is shrink-to-fit. That's anything
with position: absolute or fixed, or that's floated, or display:
table-cell or table.

Not completely sure exactly what you're doing, but position: absolute
with width: auto (the default) sounds like the most appropriate.

i tried both display: table and float: left and they both worked!
is there a rule? that when is it "max width" and when is it "just
shrink to fit"?

the display: table feels a bit weird as it is not really a table.

besides, the height seems just a little bit taller than it is...

http://www.0011.com/test_drag/index3.php

on IE 7.0, it is exactly the right size... but on Firefox 2.0.0.8 and
Safari 3 Win Beta, it is shown as a bit taller than it has to be. (as
you see the background color coming out at the bottom).