Home/ Questions/Q 7588931
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T20:03:07+00:00

I am currently working on a prototype that is using CSS3 multi columns for

  • 0

I am currently working on a prototype that is using CSS3 multi columns for dividing up content and it appears to work well. My issue is that inside of a block that is part of the columns there is an expanding height section and well, in Firefox when the height of an element inside of a CSS3 multi-column changes it disappears and then Firefox crashes.

Shouldn’t CSS3 multi-columns take into account varied height content inside or is it not made for that sort of thing? I’d really hate to have to use a plugin like Columnizer, because Columnizer is a pain in the butt to get working correctly.

Here is the layout:

[DIV]
    [CONTENT] - Default height is 38 pixels
    [EXPAND LINK] - A link when clicked that modifies the height of content to be 52 pixels.
[/DIV]

The issue is as soon as the link is clicked and the height changes, it’s like it loses its layout and positioning (the height and width change to 0), then Firefox crashes. This is also the case if I use Firebug to change the height manually.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I resolved the issue right are posting this question basically and my solution was as follows in-case someone else runs into this issue which I believe some will.

    I had a parent div element with the appropriate CSS3 multi-column code. The inner elements are article elements (you could just use div’s though). The issue was that the inner article elements were being floated left (just out of pure habit of having to float things to give the appearance of columnised items). The floated elements were clashing with the CSS3 multi-column code thus crashing the browser.

    I’m guessing that because a float modifies the layout of an element, the multi-column code was trying to perhaps readjust the box and then getting into an endless loop. I’m not entirely sure what went on, but floating elements inside of a multi-column div or anything is bad.

    • 0