div as small as possible

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Summercool
    #1

    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.

    Tags: None
    • Ben C
      #2
      Re: div as small as possible

      On 2007-10-29, Summercool <Summercoolness @gmail.comwrote :
      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.

        Comment

        • Summercool
          #3
          Re: div as small as possible

          On Oct 29, 3:47 am, Ben C <spams...@spam. eggswrote:
          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).




            Comment

            • Ben C
              #4
              Re: div as small as possible

              On 2007-10-29, Summercool <Summercoolness @gmail.comwrote :
              On Oct 29, 3:47 am, Ben C <spams...@spam. eggswrote:
              >
              >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?
              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".

                Comment

                Previous template Next
                Working...