DIV container size to width of wrapped floating content

Question

I am trying to create a div container with a width of only the size of the content. I use this part using float: left in the container. Here is what I still have.

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 encountered is when floater delimiters are wrapped in the container. I want them wrapped, but I also want the width of the container div to be changed accordingly. For example, if your browser has a width of 1000 pixels, everything works fine, and the container - 900 pixels. However, if you reduce the browser size to about 750 pixels, the third dive will be moved to the next line, but the container will have a width of 750 pixels; not 600px i want.

Is behavior possible? If so, how?

I made a feed for everyone to see what I'm talking about. Click here.

Answer 1

This means that the width of the .container element is determined by the width of the page or the element containing it. The containing element may or may not be an html element depending on the browser. Basically, you have .floater elements having a fixed width of 300px x 100px (specified explication), and the width and height of the .container element are given by bumps. Try something like this.

 .container {width: 90%;} 

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

In addition, you may experience problems with code that depends on what you have above, below, and inside the .container element, since you have not cleared you of the float. Try something like this

 .container {overflow: auto;} 

Answer 2

Well, we had the same problem. We used the jQuery masonry plugin specifically for our floating elements.

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

The only thing you should use this plugin. Again, if you are trying to float elements in a container that does not have a fixed width, we assume that your layout will greatly benefit from this plugin.

Answer 3

You need to clean the floats for the container to pack. Or an announcement ...

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

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

and using clearfix from the site above, change the class on the container as class="container cf"

Answer 4

I did something similar for the Instagram thumbnail image gallery, where the image can be smaller than the size of the thumbnail, but not larger, and the thumbnails are assembled at 100% of the width of the container. This is so that the images occupy the entire width without stretching them.

You can get this effect quite easily if you use a CSS preprocessor. If you are not using a CSS preprocessor, then there will be more effort.

Here is a CodePen example that contains a link to another demo.

In essence, the magic part is 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 he does is that he calculates the ideal width for the element with a maximum width limit and then adds another to the line after reaching this limit, which creates a liquid arrangement of elements, each of which does not cover more than the specified maximum width (in in this case, floaterSize ).

The first few generated ones are as follows:

 @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%; } } 

This is a mobile approach. Essentially, if your window is 299 pixels or less, you should see 1 block, but if it has 599 pixels or less, it will hold 2 blocks, and 899 pixels will hold 3 blocks, etc., until you want go higher in screen width. The provided Stylus will write 10 media queries, up to @media screen and (min-width: 3000px) .

All the generated CSS that this 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%; } }