One of the most difficult cases to deal with the web builder is that the same CSS code is interpreted by different browsers will generate different effects. In the past, various browser generated a very different page is visible everywhere, and now we can get better results with so-called compliant browsers. However, the difference in display is still unavoidable.
Some browsers currently in the leadership have such a difference in processing floating effects. If anyone wants to create a layout that can be dynamically changed with the size of the browser window, then this will be a special trouble.
Simple pages without floating
Suppose you have two Div - Div # One and Div # Two, they have a fixed width. If there is no floating or absolute positioning, these DIVs will be placed on the left side of the browser window in the form of another one (as shown in Example A), because the standard page scheduled order is from left to right, From top to bottom, block-level element will begin a new row next to the previous element.
Below is a section of an HTML that requires all examples:
The following CSS code is used for basic, without 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 containing a float: left or float: right property, and apply it to block-level elements such as a DIV tab, the DIV will be deleted from the ordinary text arrangement of the document, and It is forced to be placed on the left or right side of the containing element. If the element contains an element, then the DIV will float to the side of the browser window. Otherwise, the floating div will be moved to the edge containing the DIV, and it will not be like this.
If you have more than one floating element, the second and subsequent floating elements will follow the first one, which is arranged in a line of letters in the text. A series of floating elements will be collected, until the entire width of the browser window, and then replaced to the next line, just like the text in the paragraph. As long as Div # One and Div # TWO have fixed width, and their total width is less than the width of the browser window, they are like the example B. Several large browsers maintain considerable consistency in the way of processing fixed width floating. The page generated by the following CSS code is displayed in IE6, Netscape 7, Mozilla 1 and Opera 7.
Div # one {float: Left; width: 150px; margin: 0px; Background-color: red;} Div # two {float: left; width: 300px; padding: 0px 10px 5px 10px; margin: 0px; Background-Color: Silver;}
Floating of variable width brings variable results
When you want to turn the DIV to the width, the problem that generates an inconsistent with the floating effect is coming out. For example, suppose you want to put a fixed width bar on the left side of the page, use a list of navigation buttons, and want to put another column on the right side, let it expand and shrink according to the browser window (size). You may think that you can implement this effect with two left floating Divs; one is a fixed width, and the other sets the width to automatic, so that the DIV is automatically resized so that it can fill the first DIV And the blank between the right side of the browser window. Example C is the result of the code display:
Div # one {float: Left; width: 150px; margin: 0px; Background-color: red;} Div # Two {float: left; width: auto; padding: 0px 10px 5px 10px; margin: 0px; Background-Color: Silver;}
If this example is displayed in IE, you will get an expected effect, that is, the left is a fixed width bar, next to its right side is a variable width bar; however, the same code is in other current popular browsers. But it will generate different results. The second DIV will fall below, not the row is placed on the right. The result is very similar to the page without floating.
solution
To get this two-column layout, one of which automatically adjusts the ideal effect of the size is to use floating DIVs in the first column, but to delete floats from the column that must be adjusted. Since the floating column and the ordinary document schedule are separated, the conventional DIV will be placed above, but below the floating DIV. Add a Padding on the left and give it equal to the width of the floating DIV, and the content of the regular div is like a column on the right side of the left DIV. Example D illustrates this trick. The following code can produce the same effect in all browsers.
Div # one {float: left; width: 150px; margin: 0px; Background-color: red;} div # Two {width: auto; padding: 0px 10px 5px 160px; margin: 0px; Background-Color: Silver;
Although the current Netscape / Mozilla browser is generally considered to be more compliant than IE, I personally think IE is more consistent than the first two browsers. But if you don't consider, what is the result of "correct", then its difference will bring the most headache of the web builder. To avoid your page design, you know that the effect of browser generation will be different, and it is also the most important step.
