1

I want to tightly wrap some divs with an outer div, such that the outer div resizes with the addition of more inner divs. Right now, the parent div just fills 100% width, which isn't quite right.

Here's some code and a Fiddle:

<div id="toolbar">
    <ul>
        <li><i class="icon-facebook-sign"></i></li>
        <li><i class="icon-twitter-sign"></i></li>
        <li><i class="icon-envelope-alt"></i></li>
        <li><i class="icon-cloud-upload"></i></li>
        <li><i class="icon-cog"></i></li>
    </ul>
</div>

#toolbar {
    overflow:hidden;
    padding:5px;
    background:#FFF;
    border-radius:5px;
    border:1px solid #AAA;
    margin-bottom:15px;
}
    #toolbar ul {
        overflow:auto;
        list-style:none;
        margin:0;
        padding:0;
    }
    #toolbar li {
        display:inline;
        padding:5px;
        background:#606c88;
        color:#FFF;
        font-size:24px;
        border-radius:5px;
    }
Jon
  • 3,154
  • 13
  • 53
  • 96
  • possible duplicate of [Fit
    tightly around enclosed image?](http://stackoverflow.com/questions/7178537/fit-div-tightly-around-enclosed-image)
     – nhahtdh Jan 02 '13 at 21:49
  • 1
    Set `display` of `#toolbar` to `inline-block` solves the problem. http://jsfiddle.net/LX3jJ/3/ – nhahtdh Jan 02 '13 at 21:50
  • **Related:** [Do divs expand vertically to fit their children divs?](http://stackoverflow.com/q/5450371/1497596) – DavidRR Sep 16 '14 at 12:46

2 Answers2

0

Set the display-attribute of the outer div #toolbar and the list #toolbar ul to inline-block:

#toolbar {
    overflow:hidden;
    padding:5px;
    background:#FFF;
    border-radius:5px;
    border:1px solid #AAA;
    margin-bottom:15px;
    display:inline-block;
}
#toolbar ul {
    overflow:auto;
    list-style:none;
    margin:0;
    padding:0;
    display:inline-block;
}

I hope it helps...

EDIT: You said "tightly wrap". You have a padding in the toolbar-div. So if you really want to have it with no space towards the outer div, remove the line padding:5px.

atreju
  • 477
  • 4
  • 14
-1
#toolbar {
  float: left;
}

This will "shrink wrap" the .toolbar around its contents. You'll need another element after it to clear: both; so that you don't get elements to align to the right of the .toolbar if you don't want that.

Scrimothy
  • 2,536
  • 14
  • 23
  • why a -1 here? Unless there are other parameters not mentioned, `float` does exactly what is being asked. [fiddle](http://jsfiddle.net/scrimothy/4hA26/) – Scrimothy Jan 02 '13 at 21:56