CSS3 Multiple Column Hover Bug

[exsite_interactive]

Hey guys,

Was hoping someone would be able to help me with an issue i am having. I am using css3 multiple column spec on the following page: http://thecoveteur.com/coveteursStage.php

I have used the javascript fall back from A List Apart to make it work with IE – http://www.alistapart.com/articles/css3multicolumn

The issue i am having is on firefox, when the page loads it puts all items except one in the first column, and the last item in the 2nd column, then as you hover over the area, the rest of the columns flow in. Not really sure what is causing this but was hoping someone could help me out.

The only css used is on the div containing the content, as follows:

.newsCols {
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-moz-column-count: 3;
-moz-column-gap: 20px;
-o-column-count: 3;
-o-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}

Any help would be greatly appreciated.

[exsite_interactive]

anyone…??

[thomas]

Is there a reason for this rule in styles.css?

p { float: left; width: 100%; margin: 0 0 15px 0; }

If you remove the float from your paragraphs, it should clear up the issue. It does appear to be a bug, though.

[SgtLegend]

@thomas is correct, the floats are causing the columns to break there flow because by default the multiple columns feature doesn’t contain floats by default as far as i know.

[exsite_interactive]

floats were causing the break. thanks guys!

[Author]

Posts