1

I have a box that has the div class box_1 assigned to it.

Now i want to give this class a width but also make it expandable.

If i just try to give it a value of auto, It will just expand to the end of the screen. thats not what i want. So say i give it a width of 4 inches but the content inside the div requires more space (dynamic content), it will need to be expanded. any ideas on how i could make it expandable (only when it needs to be expanded) and also give it a 'default width'?

2 Answers2

2

You can use the CSS propety min-width for this.

You can do it like this:

.box_1{
    min-width: 4in;
}

Now the div would take up 4 inches by default if the content fits within it, and expand if needed.

Update :
Looking around i found this How to make div not larger than its contents?

So what you need is to use following css:

.box_1{
    display: inline-block;
    min-width: 4in;
}

This sets the minimum width to a specific amount and converts the element to inline-block. But as per the post linked above this does not work in IE 7/8, for that you would need to change the div to span.

Try it out here:
div => http://jsfiddle.net/TdNHs/
span => http://jsfiddle.net/TdNHs/1/

Community
  • 1
  • 1
danishgoel
  • 3,650
  • 1
  • 18
  • 30
  • that wont work. the min-width just stops it from getting smaller then x px. I need something that will give it a default width but make it expandable if needed. thanks –  Oct 16 '11 at 19:34
  • @Nav can you use javascript for this, or do you need a pure CSS solution ? – danishgoel Oct 16 '11 at 19:38
  • @Nav I have updated my answer, have a look. It is done in pure CSS, but as the `min-height` property is not available in IE6 the effect is not complete there. – danishgoel Oct 16 '11 at 19:58
0
 .box_1{
        min-width: 0px !important;
       }

it will get the small as possible and also expandable

ti will be at 0px, but.. hey, what's your default width anyway?

Update

http://jsfiddle.net/tbUUt/1/

I just used the content inside te expandable div some boxes, but you can remove them one by one and the div will resize.

#box_1{
        border: 1px solid red;
        display: inline-block;

       }

<div id="box_1">

    <div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
     <div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
    <div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
    <div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
    <div style="border:1px solid blue; width: 50px; height:50px;float:left;"></div>
</div>
rmagnum2002
  • 11,341
  • 8
  • 49
  • 86
  • no, thats not what it does. it simply stops it getting any smaller then the given value. It will not give a default. –  Oct 16 '11 at 19:40
  • well, this is confusing.. you want a div with default width of 50px for ex but also you want it expandable, right? – rmagnum2002 Oct 16 '11 at 19:41
  • I am working on it, I'll let you know on a few minutes if I have solution, or may be by that time there will be one from another guy. – rmagnum2002 Oct 16 '11 at 19:48