Standard Layout FAQs and Solutions _ Experience Exchange

Friends who need a standard layout, often encounter some problems, here are some layout issues

• CSS2.0 box model hierarchy plane and 3D

• 3 Megapixel problems and solutions

• When using float float container, under the IE6 will produce 3px gap, it is interesting that the right container is not set height 3px in the right side of the container, when set height and then run to the left side of the container, so the layout accuracy requirements, please refer to Example 29, 31 of the solution

• When the top container floats, the bottom container floats, causing the page to go awry.

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

• How do I fit the parent container to the height of the child elements when the child elements are floating and unknown height?

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

• Relative positioning and absolute positioning

• When planning the page, many times need to use relative positioning or absolute positioning, there is a skill, after mastering some places without cumbersome JS. That is, when the parent container uses relative positioning, the child element then uses absolute positioning, where 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 are multiple consecutive floats within the page, such as the icon list on this page is left floating, when the left margin value of Li is set, the left side is doubled. If the margin is set to 10px, and the left side is 20px, the way to solve it is to add a display:inline on the floating element, so as to avoid double margin bug

