Standard Layout FAQs and Solutions _ Experience Exchange

Source: Internet
Author: User
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

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.