The presence of elements of floating children determines the parental 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; } 

A container with a red background always seems to stretch to 100%. I would like to make its width dependent on floating children, so in this case 3 times 100 pixels.

I want this to be so. In a flexible layout, I have a container containing several children of different sizes. Width and number of children may vary. Children always swim. The goal is to have children with a floating point. So, if I always have one child, I would just set it margin-right and margin-left for auto. However, there are several children that I want to put next to each other, but after they have been arranged horizontally, I would like this line to be focused on the page. I can’t give a fixed width to the container, since the number of children and each width are not determined in advance.

I think I can do it with javascript, but I am wondering if there is a pure css solution. Thanks

Answer 1

In addition to the Adsy suggestion (to set the container to a fixed position), you can:

1) Use an absolute position 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) Install the float in the container, which is good if you need its 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/

Answer 2

By wrapping the div of your container in another wrapper div, you can center your red container div, and the red div will only be wider than 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/

Answer 3

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

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

Answer 4

Add position:fixed; to container

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

Fiddle