div as small as possible

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Summercool - 29 Oct 2007 11:29 GMT

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.

Reply to this Message

Ben C - 29 Oct 2007 11:47 GMT

> 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...
[quoted text clipped - 10 lines]
> 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.

Reply to this Message

Summercool - 29 Oct 2007 12:16 GMT

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

Reply to this Message

Ben C - 29 Oct 2007 12:49 GMT

>> 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:
[quoted text clipped - 5 lines]
> i tried both display: table and float: left and they both worked!
> is there a rule?

There is no shortage of rules. Search the CSS 2.1 specification for the
string "shrink-to-fit".

> that when is it "max width" and when is it "just
> shrink to fit"?

In the cases I gave (I think I got them all). I prefer to call them
"greedy auto width" and "shrink-to-fit auto width".

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

I'm sure the height is always exactly as tall as it is [1].

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

> on IE 7.0, it is exactly the right size...

Odd, I'm sure I heard display: table doesn't work in IE. Perhaps it does
in IE7.

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

That's descender space below the inline img. It should be there. Use
strict mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">

and set those imgs to display: block.

[1] There is a story about Bertrand Russell and his friend on a boat.
Friend says, "I thought your boat was bigger than it is.". Russell
replies testily, "No, my boat is not bigger than it is".

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / October 2007

div as small as possible