Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make elements automatically fit width of parent w/o tables/javascript

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:

A gif showing autosizing boxes

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?

like image 404
daviga404 Avatar asked Feb 28 '13 16:02

daviga404


People also ask

How do you auto adjust the div width according to content in it?

Using inline-block property: Use display: inline-block property to set a div size according to its content.

How do I make a div fit inside another div?

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%.

How do I make a div fit content?

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).

What is width fit content?

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 "


1 Answers

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

like image 198
David Hellsing Avatar answered Sep 19 '22 00:09

David Hellsing