Question

In this example http://jsbin.com/inoka4 no width is defined for parent element

if i want to wrap red boxes in container border.

then we can make this in 5 ways

• to giving float also to <div class="container">
• overflow:hidden or overflow:auto
• any clearfix hack to <div class="container clearfix">
• Giving height to <div class="container">
• adding one more html element (for example another div or <br >) after 2
  boxes in <div class="container"> enter code hereand give
clear:leftor:bothor:right` to that
  element

my question is any other option except float do not make any changes in <div class="container"> and inner boxes width. but if we use float:left or right to parent box then it’s shrink the whole box and inner-boxes as well.

Why?

example link: http://jsbin.com/inoka4

Edit: My question is not about which method i should use, the question is why Float shrink the width

Answer 1

If you dont’ use float on the container it’s width is set to 100%. If you add a floating, it only takes the space it needs. In this case the width is calculated by the two divs inside.

To wrap the red boxes in the container border there is not other option except adding float to the container. The only other option would be to absolutely position all the elements but in this case you have to know the width and height of all elements in advance. So that really isn’t an option.

So my advice is to use float on the container and add a clear: both on the element after the container.