4

I seem to be having an issue with the fluid 960 grid system where in IE7 at very intermittent widths it pushes the 3rd column (3 column layout) below the 1st and 2nd column. It seems to work fine on every other browser.

I cannot seem to fix it.

To help demonstrate watch the following 20 second video: http://dl.dropbox.com/u/4221318/ie7-fluid-960/960gs.flv

And the test page: http://jsfiddle.net/Tribal/EwQUB/. I am using the div.col nested div to allow me to create padding on the .grid_4 div. I have tried removing the .col styles however this does not resolve the issue.

Thanks for your help,

Sam

Tribal
  • 146
  • 7

1 Answers1

3

Anytime you have more than one element, be sure to use the additional alpha & omega classes.

Alpha is for the first item, and omega is for the last. These classes set the appropriate margin to be 0.

See updated fiddle: http://jsfiddle.net/7Eq4e/1/

and the css that's involved:

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
    margin-left: 0;
}

.omega {
    margin-right: 0;
}
Jason
  • 7,612
  • 14
  • 77
  • 127
  • Not a problem. I'm happy to help and that's what SE is for, as I always have questions on here that just having another set of eyes on is half the battle. – Jason Dec 15 '11 at 18:46