The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Resizable Divs

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #45818

    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.


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

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.