1

I have the html set up below. Inside inner_container there can be content that can have a width of 500px to 50000px. How might I set up the style so that inner_container matches the exact width of the contents width?

<div id="main_container" class="main">
  <div id="scrollable_container" style="overflow: scroll; width: 9000px; height: 700px">
    <div class="inner_container" style="width: 12000px">
      <!-- Content here can be any widths... from small to reall large -->
    </div>
  </div>
</div>
mikeymurph77
  • 752
  • 1
  • 11
  • 28
  • Use `width: 100%` on the content container – pbaldauf Apr 16 '15 at 14:30
  • This is valid for setting the child to the width of the parent but it doesnt work the other way around. The OP is looking for a way to set the parents width dynamically based on the child's width. I would think the best method is to use a script if the content is truly dynamic. However, there appears to be a similar post on SO here which utilizes CSS: http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents – david tallon Apr 16 '15 at 14:48

3 Answers3

2

In your stylesheet, set its display to inline-block.

.inner_container{
    display:inline-block;
}

More information on the display property

Shaggy
  • 6,696
  • 2
  • 25
  • 45
2

first for a better practice, separate your html from styling.

in html file:

<div id="main_container" class="main">
    <div id="scrollable_container">
        <div class="inner_container">
            <!-- Content here can be any widths... from small to reall large -->
        </div>
    </div>
</div>

and in your css file

#main_container {
    float: none !important;
    width: 100% !important;
}
#scrollable_container {
    overflow: scroll;
    height: 700px;
    float: none !important;
    width: auto !important;
}
.inner_container {
    float: none !important;
    width: auto !important;
    overflow:hidden;
    border:2px solid #ccc; /* So you can notice the difference*/
}

the !important are just in case (overwrite). And the overflow:hidden; is to make sure that the inner_container stays surrounding its content even if the contents are floated.

AliAwwad
  • 379
  • 3
  • 13
0

Try the next:

.inner_container { 
    display:inline-block;
    width: auto;
    height: auto;
    overflow: hidden;
}
Vinicio Ajuchan
  • 342
  • 1
  • 9