Explanation of Yui grids CSS

Grids CSS in Yui has three parts worth your attention and learning:

1. layout idea: using the "negative margin (negative margins)" technology

For details, see creating liquid layouts with negative margins.

2. Use EM: when the user changes the font size, the width is also changed.

Tip: divide the width with 13 pixels (keep decimal points to kilobytes), while IE browser uses 13.333.

/* 750 centered, and backward compatibility */#doc {width:57.69em;*width:56.251em;min-width:750px;}

• 57.69 = 750/13
• 56.251 = 750/13 .333

Note:The article setting page width with Yui grids mentions that the EM in IE is the width divided by 13 and multiplied by. 9759. Why is the width of 750px in IE in the current Yui source code 56.301em (750/13*0.9759).

This algorithm will be replaced with the new algorithm in the next version of Yui (IE browser uses 13.333 ).

3. Clear the floating Layout

For non-ie browsers:

.yui-gf:after {content:".";display:block;height:0;clear:both;visibility:hidden;}

For ie browsers, Zoom: 1 is used to trigger haslayout. But for this explanation of Nate koechley:

Zoom is a non-valid attribute and so you'll see warnings when you validate your CSS. I'm aware of that and think it is an acceptable tradeoff.

I agree with his ideas:I think it is an acceptable tradeoff.