Standard Layout FAQ and Solutions _ Experience Exchange

CSS2.0 box model hierarchy plane schematic diagram and 3D schematic diagram

3 Pixel problems and solutions

when using float float container, under the IE6 will produce 3px Void, is interesting is the right container does not set a height 3px on the right side of the container, when the set height and ran to the left side of the container, so the layout accuracy requirements, please refer to Example 29, 31 solution

When the top container floats, the bottom container floats, causing the page to go out of disorder.

If the above example of footer must be a separate line, but when the sidebar float, the content of the height is less than the height of sidebar, footer also followed by floating to the right side of the sidebar, resulting in page confusion. The solution is to insert a container between maincontent and footer and set the style clear:both; height:0; font-size:1px; line-height:0px; clear with Clear:both to make page normal

How do I make the parent container fit into the height of the child element when the child element is floating and unknown height?

This

situation can be added to the parent window with Overflow:auto;zoom:1, the two style properties, the Overflow:auto of the parent container from the height of the inner container, zoom:1 the CSS HACK to be used for compatible IE6. Zoom:1 the verification of the Consortium, which is also a pity, fortunately, ie support <!--[if ie]> this writing, you can specifically for IE to write a separate style, so you can write this property in the page of the <!--[if ie]>, This should be done by validating the

Relative positioning and absolute positioning

planning the page, many times need to use relative positioning or absolute positioning, which has a skill, after mastering some places do not need to be cumbersome JS. That is, when the parent container uses relative positioning, the child element uses absolute positioning, and the position is relative to the parent element. If the parent element is not positioned, then the absolute positioning of the child element is relative to the browser

IE6 double margin Bug

when there is more than one continuous float in the page, such as the list of icons on this page is left floating, when the left margin value of Li is set, the left side is displayed double. If the outer margin is set to 10px and the left side is 20px, the solution is to add a display:inline to the floating element, which avoids double margin bugs