One of the most difficult cases for Web Builders is that the same CSS code is interpreted by different browsers to produce different results. In the past, a variety of different browsers generated extremely different pages are everywhere, and now we can use the so-called standard browser to get better results. However, the difference in the display effect cannot be avoided.
Some leading browsers have such differences in handling floating effects. If someone wants to create a layout that can dynamically change the size of multiple columns as the size of the browser window changes, this will be a particularly troublesome issue.
Simple non-floating page
Suppose you have two divdiv # one and div # two, both of which have fixed width. Without floating or absolute positioning, these divs will be placed on the left side of the browser window in the form of one stacked on the other (as shown in example ), because the standard page is arranged from left to right, from top to bottom, block-level elements will start a new row next to the previous element.
Below is a piece of HTML required for all examples:
<Body>
<Div id = "one">
Port side text...
</Div>
<Div id = "two">
Second column text...
</Div>
</Body>
The following CSS code is used for basic, non-floating versions:
Div # one {
Width: 150px;
Margin: 0px;
Background-color: red;
}
Div # two {
Width: 300px;
Padding: 0px 10px 5px 10px;
Margin: 0px;
Background-color: silver;
}
Basic floating
When you create a CSS style that contains the float: left or float: right attribute and apply it to block-level elements such as div labels, the div will be deleted from the general text Arrangement Order of the document and forcibly placed on the left or right side of the containing element. If an element is a subject tag, the div will float to the side of the browser window. Otherwise, the floating div will move to the edge that contains the div, which is not previously the case.
If you have more than one floating element, the second and subsequent floating elements will be arranged in a line following the first one. The arrangement is very similar to a line of letters in the text. A series of floating elements are aligned into one line until the entire width of the browser window is filled, and then changed to the next line, arranged as the text in the paragraph.
Float with fixed width
As long as div # one and div # two have a fixed width and their total width is smaller than the width of the browser window, they will be placed together as shown in Example B. Several large browsers maintain consistent processing of fixed-width fluctuations. The pages generated by the following CSS code are exactly the same in IE6, Netscape 7, Mozilla 1, and Opera 7.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
