1

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Dwayne Charrington
  • 6,524
  • 7
  • 41
  • 63
  • Need to see your code, or a test page. – BoltClock Mar 05 '12 at 05:44
  • I just solved the issue actually, that always happens. Should I put it as an answer or just close the question? – Dwayne Charrington Mar 05 '12 at 05:47
  • If you don't feel that the answer will help anybody (e.g. it was some silly mistake in your code), I can close it for you. – BoltClock Mar 05 '12 at 05:49
  • It wasn't due to any mistake, it was more-so a misunderstanding of how CSS3 multi-columns are supposed to work and one that someone else might encounter. Thanks BoltClock. – Dwayne Charrington Mar 05 '12 at 05:51
  • Well, if you feel posting an answer will help others who may share your misunderstanding, I'd encourage you to post :) Otherwise, go ahead and raise a flag. – BoltClock Mar 05 '12 at 05:52

1 Answers1

0

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.

Dwayne Charrington
  • 6,524
  • 7
  • 41
  • 63