CODEWITHSUNDEEP
htmlcss
mikeymurph77
mikeymurph77

Reputation: 802

Have a div match the contents width in CSS

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>

Upvotes: 1

Views: 403

Answers (3)

AliAwwad
AliAwwad

Reputation: 379

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.

Upvotes: 2

Vinicio Ajuchan
Vinicio Ajuchan

Reputation: 370

Try the next:

.inner_container { 
    display:inline-block;
    width: auto;
    height: auto;
    overflow: hidden;
}

Upvotes: 0

Shaggy
Shaggy

Reputation: 6796

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

.inner_container{
    display:inline-block;
}

More information on the display property

Upvotes: 2

Related Questions