Having the floating children elements determine parent width

Question

Here is an example

http://jsfiddle.net/BringMeAnother/LwXhE/

// html
<div class="container clearfix">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

// css
.container {
    background: red;
    padding: 10px;
}
.child {
    width: 100px;
    height: 100px;
    float: left;
}
.child:nth-child(even) {
    background: green;
}
.child:nth-child(odd) {
    background: blue;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

The container with the red background seem to always stretch to 100%. What I'd like to do is to make its width depend on the floating children, so in this case, 3 times 100px.

The reason I'd like to have this is as follow. In a flexible layout, I have a container that contains several child elements of different sizes. The width and amount of those children can vary. The children always float. The goal is to have the floating children centered. So, if I always have one child element, I'd simply set its margin-right and margin-left to auto. However, there are several children which I wish to put next to each other, but after they have been ordered horizontally, I'd like that row to be centered on the page. I cannot give a fixed width to the container since the amount of children and each of their width are not determined in advance.

I think I might be able to do this with javascript, but I wonder if there is a pure css solution. Thanks

Ivan Chaer · Answer 1 · 2013-10-29T10:44:51.930

Besides Adsy suggestion (to set the container's position to fixed), you could:

1) Use position absolute on the container:

HTML:

<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

CSS:

.container {
    background: red;
    padding: 10px;
    position:absolute;
}
.child {
    width: 100px;
    height: 100px;
    float: left;
}
.child:nth-child(even) {
    background: green;
}
.child:nth-child(odd) {
    background: blue;
}

http://jsfiddle.net/tKz8b/

2) Set a float on the container, which is good if you need it with relative / static positioning:

HTML:

<div class="container">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>
<div class="clearfix"></div>
<div>Next</div>

CSS:

.container {
    background: red;
    padding: 10px;
    float: left;
}
.child {
    width: 100px;
    height: 100px;
    float: left;
}
.child:nth-child(even) {
    background: green;
}
.child:nth-child(odd) {
    background: blue;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

http://jsfiddle.net/LYrWx/1/

Is there a solution for more than one line of elements? http://stackoverflow.com/questions/36481408/how-to-get-rid-of-empty-space-on-the-right-of-a-container-with-floating-items — The Student, Apr 07 '16 at 17:19
like this? http://jsfiddle.net/ivanchaer/L6ojt8vs/ (if so, let me know, so that I can post this answer on the other question, thanks!). — Ivan Chaer, Apr 07 '16 at 21:35

vegemite4me · Answer 2 · 2015-09-28T09:56:20.890

3

By wrapping your container div in another wrapper div, you can centre your red container div, and the red div will only be as wide as its floating children.

HTML

<div class="centered">
    <div class="container">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

CSS

.centered {
    text-align: center;
}
.container {
    background: red;
    padding: 10px;
    display: inline-block;
}
.child {
    width: 100px;
    height: 100px;
    float: left;
}
.child:nth-child(even) {
    background: green;
}
.child:nth-child(odd) {
    background: blue;
}

Fiddle: http://jsfiddle.net/SbPRg/

edited Sep 28 '15 at 09:56

answered Aug 28 '13 at 08:25

vegemite4me

6,621
5
53
79

I didn't down vote but the reason is obvious: Modifying content to style it is not good practice – gok Nov 20 '13 at 09:37
4

@gok So why not down vote everyone who suggests adding `
` on SO? – vegemite4me Nov 20 '13 at 11:17
1

Doing this: .centered { text-align: center; } .container { display: inline-block; } was the only solution I've yet found to shrink-wrap the children. Worked in IE8 also which was important. – Chris Harrington Aug 15 '14 at 16:01

score 0 · Answer 3 · answered Oct 21 '14 at 06:48

0

Late to the party here, but all you really need is to add display: inline-block. And to center the .container div, just apply text-align: center to whatever contains it.

JSFiddle: http://jsfiddle.net/LwXhE/24/

answered Oct 21 '14 at 06:48

Chris Middleton

5,654
5
31
68

score -3 · Answer 4 · answered Aug 28 '13 at 08:24

-3

Add position:fixed; to container

.container {
    background: red;
    padding: 10px;
    position:fixed;

Fiddle

answered Aug 28 '13 at 08:24

SaturnsEye

6,297
10
46
62

1

Having position fixed is not really acceptable in most situations. – BringMeAnother Aug 29 '13 at 03:23

Having the floating children elements determine parent width

4 Answers4

Linked