DIV container size to width of wrapped floating contents

I'm trying to create a container div with a width only of the size of the contents. I have that part working correctly by using float: left on the container. Here is what I have so far.

HTML

<div class='container'>
    <div class='floater' style='background-color: #880000'>1</div>
    <div class='floater' style='background-color: #008800'>2</div>
    <div class='floater' style='background-color: #000088'>3</div>
</div>

CSS

.container {
background-color: #123456;
float: left;
}

.floater {
width: 300px;
height: 100px;
float: left;
}

The problem I'm having is when the floater divs get wrapped insid开发者_开发知识库e the container. I do want them to wrap, but I also want the width of the container div to resize accordingly. For instance, if your browser is 1000px wide, it all works fine and the container is 900px. However if you shrink the browser to something like 750px wide, the 3rd dive wraps to the next line, but the container is 750px wide; not the 600px I want.

Is the behavior I want possible? If so, how?

I made a Fiddle for everyone to see what I'm talking about Click Here

That is beacause the width of the .container element is determined by the width of the page or the containing element. The containing element may or maynot be the html element depending on the browser. Basically you have the .floater elements having a fixed width of 300px x 100px (set explicity) and the .container element width and height is set implicity. Try something like this.

.container {width: 90%;}

This will cause the width of the .container element to be always less than that of the containing element. So If for example the containing element is html which has a width of 1000px, the width of the .containing element will be 90% of 1000px which will be 900px. If the html element is 750px, the .container element will be 90% of 750px which is 675px.

Also you may or maynot have problems with you code depending on what you have above, below and inside the .container element, since you have not cleared you floats. Try some thing like this

.container {overflow: auto;}

Well, we were getting the same problem. We were using the jQuery masonry plugin specifically for our floated elements.

This http://masonry.desandro.com/demos/centered.html would solve your problem!

The only thing is, you have to use this plugin. Then again if you're trying to float elements within a container that has no fixed width, we are guessing your layout would greatly benefit by this plugin.

You'll need to clear the floats to get the container to wrap. Either ad...

<div style="clear:both"></div> after the last floater or add a clearfix to you css like...

http://nicolasgallagher.com/micro-clearfix-hack/

and using the clearfix from the site above alter the class on container to be class="container cf"

I did something similar for an image gallery of Instagram thumbnails, where the image can be less than the size of the thumbnail but not greater than, and the thumbnails take up 100% of the width of the container collectively. This is so that the images take up the whole width while not stretching them out.

You can get that effect fairly effortlessly if you use a CSS preprocessor. If you don't use a CSS preprocessor, then there would be more effort involved.

Here is a CodePen example, which contains a link to another demo.

Essentially, the magical part is this Stylus CSS:

floaterSize = 300px

.floater
  max-width floaterSize

for num in (1..10)
  @media screen and (min-width: floaterSize*num)
    .floater
      width unit(100/(num+1), '%')

What it does is that it calculates the ideal width for the element with a max-width restriction, and will then add another to the row once that limit is reached, resulting in a fluid layout of elements where each does not span larger than the specified max-width (in this case, floaterSize).

The first few generated ones look like this:

@media screen and (min-width: 300px) {
  .floater {
    width: 50%;
  }
}
@media screen and (min-width: 600px) {
  .floater {
    width: 33.333333333333336%;
  }
}
@media screen and (min-width: 900px) {
  .floater {
    width: 25%;
  }
}

It is a mobile-first approach. Essentially, if your window is 299px or less, you should see 1 block, but if it's 599px or less, that will accommodate 2 blocks, while 899px will accommodate 3 blocks, etc., up until you don't want to go any higher in screen width. The provided Stylus would write 10 media queries, up to @media screen and (min-width: 3000px).

The entire generated CSS that that Stylus code provides can be seen below.

@media screen and (min-width: 300px) {
  .floater {
    width: 50%;
  }
}
@media screen and (min-width: 600px) {
  .floater {
    width: 33.333333333333336%;
  }
}
@media screen and (min-width: 900px) {
  .floater {
    width: 25%;
  }
}
@media screen and (min-width: 1200px) {
  .floater {
    width: 20%;
  }
}
@media screen and (min-width: 1500px) {
  .floater {
    width: 16.666666666666668%;
  }
}
@media screen and (min-width: 1800px) {
  .floater {
    width: 14.285714285714286%;
  }
}
@media screen and (min-width: 2100px) {
  .floater {
    width: 12.5%;
  }
}
@media screen and (min-width: 2400px) {
  .floater {
    width: 11.11111111111111%;
  }
}
@media screen and (min-width: 2700px) {
  .floater {
    width: 10%;
  }
}
@media screen and (min-width: 3000px) {
  .floater {
    width: 9.090909090909092%;
  }
}