Clear Left on Automatic Rowas

[jsanglier]

Hi

Having a lot of fun with your baby!

On the documentation for automatic rows in real life (or perhaps on the demo page) you might want to point out that with media queries, if you set one "clear:left" parameter in one query, you need to kill it off in the next one up.

So, Say you have two media queries with a box

@media only screen and (min-width: 30.063em) {
.box2 {
width: 33.33%;
}
.box2:nth-child(3n+1) {
clear: left;
}
}
@media only screen and (min-width: 64.063em) {
.box2 {
width: 20%;
}
.box2:nth-child(3n+1) {
clear: none;
}
.box2:nth-child(5n+1) {
clear: left;
}
}

In the larger one you need to clear:none the box2:nth-child(3n+1) other wise it will mess up your attempt at 5 columns!

I just spent an hour staring at the obvious wondering why it didn't work, so thought I would put it here for the next idiot like me!

[microcipcip]

Another related note about the documentation, on this page, the text: "The "clear: left" solution is not compatible with IE6 and IE7." is not accurate, the nth-child is not supported on IE8 too.