Forums

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

Home Forums CSS Problem of transfer block in table-cell on a new line

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #253750
    Ergonomic.Code
    Participant

    Hi!

    I’m writing a template for marking on flex/box. And faced with the problem of emulation of some properties. At the moment, I decide them on the JS. What complicates code.

    So I decided to try to use the property of table-cell for child elements whose parent has the property display: block. Yes, it’s not right, but it works!

    When I’m trying to break the table-cell elements to strings, I ran into a problem. And that’s how I tried to solve them:

    • If the child blocks table-cell overflow the parent horizontally, then the following blocks are not transferred to the new line. And it is logical.
      Example: http://codepen.io/anon/pen/JNoLeP
    • If I use the cancel flow, I lose equal to the width of columns for the element to be wrapped to the next line. So, this method only works for IE9+. I’m willing to drop IE7, but not ready to abandon IE8.
      Example: http://codepen.io/anon/pen/aWbPdd

    • If I use the blocks which separate the table-cell on the line, everything becomes fine! But this complicates the CSS and JS code.
      Example: http://codepen.io/anon/pen/YVzdGx

    What ways to break table-cell can be applied, besides the above described options?

    An example of a 12 column layout, fix the problem of calculation of the width percentage: http://codepen.io/anon/pen/PmwRvK
    In order to make it clear why I do this.

    I will be glad to hear your answers! And excuse me for my bad English.

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