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