Is it possible to create a div containing multiple boxes that automatically fit to the size of the parent (distributed evenly) without the use of a table or Javascript? I realize that it is possible with table-layout:fixed;
but I have tried to animate that and it did not seem to work very well. The following picture is an example of what I mean:
I am trying to increase the width of one box inside the div which will then case the rest of the boxes to automatically size so all of the boxes fit into the div evenly. I need it to be animated, not just instant in which case I would just use a table. I have also experimented with it using Javascript, animating it with a -webkit-transition
but this did not turn out to animate very well. Instead of expanding/decreasing in size, the box seemed to start out it's width at 0px then stretch to the size given to it. (this was using a table with table-layout:fixed
. Is there a pure CSS/HTML way to do this, or does it require the use of Javascript and/or a table?
Using inline-block property: Use display: inline-block property to set a div size according to its content.
Method 2: We can make the display attribute of the child container to table-row and display attribute of parent container to table, that will take all the height available from the parent div element. To cover all the width, we can make the width of parent div to 100%.
You can simply use the CSS display property with the value inline-block to make a <div> not larger than its contents (i.e. only expand to as wide as its contents).
In a few words width: fit-content; means : "Use the space you can (available) but never less than your min-content and never more than your max-content "
Using a fixed number of children it’s possible without tables (although you need table displays), here is the CSS I used:
.parent{width:400px;height:100px;display:table}
.parent div{display:table-cell;border:1px solid #000;
-webkit-transition:width 1s;width:20%}
.parent:hover div{width:10%}
.parent div:hover{width:60%}
You need to manually calculate the percents for the best results in the animation. Demo:
http://jsbin.com/ubucod/1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With