Resizable Divs

[MaddyJS]

Hi, I have a requirement. I have two columns inside a div. It should take 50-50%. But, if I remove a column the one remaining should automatically consume 100% width. If I add 3 columns, each column should take 33%-33%-33%. The maximum no. of columns in each row should be 3. So, if I add a 4th column, then it should go to the next line. Is this possible only through CSS? If not how to get this by JS?

[CodeGraphics]

If you remove a column how? The only thing I can think of is if you are using @media query. Then you can specify at a particular viewport to remove the float left of the two columns and make them to have width of 100%, by then the div will contain one column that will cover it.

Then you can also specify at another viewport that you want the width of the columns to be 33%, then the third column will naturally come up and float left making the div to have three columns.

[Paulie_D]

Just use `display:table` on the parent div and `display:table-cell` on the children.

http://codepen.io/Paulie-D/pen/CDnup

Just be aware that this can cause some strange effects later on.

[Author]

Posts