DIV not adjusting width to contents inside another DIV with overflow: auto

Question

I have the following HTML code:

<div class="main">
    <div class="container">
        <div class="contents">
            Some funny stuff in here
        </div>
    </div>
</div>

With the following CSS:

.main {
    overflow: auto;
    width: 200px;
}
.container {
    border: 1px solid black;
}
.contents {
    width: 300px;
}

This is what this page does (see it at http://jsfiddle.net/C7RDh/7/):

main div is 200px width, with overflow: auto (i.e. scrolls contents if wider than 200px).
So, as contents div is 300px wide, it scrolls horizontally.
So, I would expect container div to be 300px as well (as elements inside it are 300px wide), but it is not! It's 200px wide.

How come? I want it to be as wide as its contents (300px), how can I achieve that?

score 2 · Accepted Answer · answered Jan 25 '13 at 08:54

2

You just need to make you container float

.container {
     border: 1px solid black;
     float: left;
 }

Float will automatically adjust your outer div to inner div width.

answered Jan 25 '13 at 08:54

zdesam

2,936
3
25
32

It actually works great but, why does the `container` div not adjust itself without the `float: left` style? – German Latorre Jan 25 '13 at 09:02
inner div takes all the width of outer div without float, which means your outer div (in this case .main is 200px so your inner div .container automatically takes all the 200px) regardless of what your .contents div width is – zdesam Jan 25 '13 at 09:20
I suggest you use this answer instead of the other answer. – CᴴᵁᴮᴮʸNᴵᴺᴶᴬ Jan 25 '13 at 09:23
1

It seems that either `float: left;` or `display: inline-block;` work perfectly well. http://stackoverflow.com/questions/6213237/how-can-i-adjust-div-width-to-contents explains some similar problem quite well. DIV seems to expand 100% by default, and in my case, `container`'s 100% is `main`'s width: 200px – German Latorre Jan 25 '13 at 09:48

score 0 · Answer 2 · edited Jun 12 '15 at 02:19

0

You need to slightly adjust your CSS. This will work:

.main {
  overflow: auto;
  width: 200px;
  float: left;
}
.container {
  border: 1px solid black;
  float: left;
}

.contents {
  width: 300px;
  float: left;
}

edited Jun 12 '15 at 02:19

L84

45,514
58
177
257

answered Jan 25 '13 at 08:40

semir.babajic

731
3
9

Just curious, can you explain why that will work? I would have been in the same boat as @antur123 as I am not a css master. – John Jan 25 '13 at 08:44
I agree with @John, why does that work and the "expected" (from my point of view) style does not work? – German Latorre Jan 25 '13 at 08:45
Pretty well explained: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ Enjoy. – semir.babajic Jan 25 '13 at 08:46
I can see nothing about `overflow: auto;` and `float: left;` together in there... – German Latorre Jan 25 '13 at 08:52
Why do you think you should see that? Because float and overflow do not have anything in common. Overflow will simply allow your container to fit in a content that normally wouldn't fit by introducing vertical/horizontal scrollbars. – semir.babajic Jan 25 '13 at 08:55
Sure, I know that, but why is `float: left;` needed to force the `container` div to expand to fit its contents? That is what you suggested, just want to know why, :-) – German Latorre Jan 25 '13 at 09:01
why are you adding `float:left;` to everything, in order to get the desired result you only need to float the `.container`. - `.container` is inheriting it's parents width, floating it detaches it and therefore is forced a width by its child (`.contents`). – CᴴᵁᴮᴮʸNᴵᴺᴶᴬ Jan 25 '13 at 09:20
Actually, I've just tested that adding either `float: left;` or `display: inline-block;` works grand. DIV seems to expand 100% otherwise, and its 100% is parent's width: 200px – German Latorre Jan 25 '13 at 09:24

score -1 · Answer 3 · edited Jan 25 '13 at 09:13

-1

Actually you should add the overflow: auto in container css not main css

edited Jan 25 '13 at 09:13

Ivan Ferić

4,725
11
37
47

answered Jan 25 '13 at 08:47

Bruce.zhang

1

That is not my case, I am asking this because I have a scenario in which I have to deal with a similar situation, no chance to do what you suggest – German Latorre Jan 25 '13 at 08:50

DIV not adjusting width to contents inside another DIV with overflow: auto

3 Answers3