CSS - how to make DIV with wrapped floats inside only be as large as it needs to be to hold the floats?

Question

I have several floats and a DIV around them. That DIV is inside another DIV, and is supposed to be horizontally centered inside it. The thing is that the inner DIV is not fixed-width, and can't be. Here is the code:

div.outer {
    text-align: center;
}

div.inner {
    display: inline-block;
    width: auto;
}

div.floatdiv {
    display: block;
    float: left;
    width: 270px;
    height: 400px;
    margin: 5px;
    background-color: Gray;
    text-align: center;
}

div.clearboth {
    clear: both;
}

And the html:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link href="main.css" rel="stylesheet" type="text/css" static="screen" />
</head>

<body>

        <div class="outer">

            <div class="inner">

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="clearboth">
                </div>

            </div>

        </div>

</body>

This works provided the browser window is wide enough for all floats to stay in one line. If the window is narrowed, then the last of the floats jumps to the next line of floats - the "inner" DIV becomes as wide as the containing block "outer" and suddenly inner is not centered in outer anymore.

http://jsfiddle.net/BYszs/

Just as a heads up, this question has been asked many times here on SO and NEVER answered. Here: http://stackoverflow.com/questions/450903/make-css-div-width-equal-to-contents and here: http://stackoverflow.com/questions/7624718/shrink-wrap-shrink-to-fit-a-div-to-reflowed-floated-divs-in-css — mowwwalker, Jan 24 '12 at 07:38
Have you looked at percentage based widths? I don't know if this is exactly what you're looking for but it seems close. http://jsfiddle.net/BYszs/5/ — Alex Morales, Jan 27 '12 at 19:48

score 4 · Answer 1 · edited May 23 '17 at 12:11

I can't think of anything better than the suggestion here, which is to use media queries.

Here's an implementation of that with your code: http://jsfiddle.net/thirtydot/BYszs/4/

@media (max-width: 1123px) {
    div.inner {
        max-width: 843px;
    }
}
@media (max-width: 843px) {
    div.inner {
        max-width: 563px;
    }
}
@media (max-width: 563px) {
    div.inner {
        max-width: 280px;
    }
}

It's very cumbersome and it doesn't (automatically) support more elements, but it works!

Well, it works in browsers that support media queries.

If you need to support other browsers, I suggest using the lightweight Respond.js. Although then, it could be said that you might as well just use JavaScript (which would have the advantage of supporting any number of elements automatically) instead of media queries.

score 1 · Answer 2 · edited Jan 28 '12 at 06:45

1

I don't think there's a solution unless you go the javaScript route (other than media queries), either by updating on the event of the browser re-sizing, or using a jQuery plug-in such as Masonry.

http://masonry.desandro.com/demos/centered.html

edited Jan 28 '12 at 06:45

enam

1,179
1
10
24

answered Jan 27 '12 at 17:52

johncho

641
2
11
25

CSS - how to make DIV with wrapped floats inside only be as large as it needs to be to hold the floats?

2 Answers2

Linked