One of the toughest situations that web builders have to contend with is that the same CSS code is interpreted differently by different browsers to produce different effects. In the past, different browsers generated extremely different pages that were ubiquitous, and now we can get better results with so-called standard browsers. However, the difference between the display effects is still unavoidable.
Some of the current leading browsers have such a difference in dealing with floating effects. If someone wants to create a layout that dynamically changes the size of multiple columns as the size of the browser window changes, this can be a particularly troublesome issue.
Simple no Floating page
Suppose you have two div--div#one and Div#two, all of which have a fixed width. Without floating or absolute positioning, the div will be placed on the left side of the browser window in the form of a stack on the other (as shown in example a), because the standard page arrangement order is left-to-right, from top to bottom, block-level elements (block-level Element) will start a new row immediately below the previous element.
The following is a section of HTML that is 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, 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;
}
The basic float
When you create a CSS style that contains float:left or float:right attributes and apply it to block-level elements such as div tags, the div is removed from the document's normal text arrangement order and forced into the containing element (containing Element) to the left or right. If the containing element is a body tag, the div floats to the side of the browser window. Otherwise, the floating div will be moved to the edge of the containing Div, which would not have been the case before.
If you have more than one floating element, the second and subsequent floating elements will be followed by the first line, which is arranged much like a line of letters in the text. A series of floating elements is aligned to the into equal line until it fills the entire width of the browser window and then to the next line, like the text in the paragraph.
Fixed-width float
As long as the Div#one and div#two have fixed widths and their total width is less than the width of the browser window, they are lined up next to each other as shown in example B. Several large browsers maintain considerable consistency in the way they handle fixed-width floats. The following CSS code generates pages that are identical to those shown 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;
}
Variable-width floats bring variable results
When you want to change the div to a variable width, the problem arises that the floating effect is inconsistent. For example, suppose you want to place a fixed-width bar on the left side of the page, a list of navigation buttons, and a different column on the right side, allowing it to expand and shrink freely according to the browser window (size).
You might think you can do this with two left-floating div, one is fixed-width, and the other is set to Automatic, allowing Div to resize automatically so that it fills the gap between the first Div and the right side of the browser window. Example C is the result shown in the following code:
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 you show this example in IE, you will get the expected effect, which is a fixed-width column on the left and a variable-width bar on the right side of it; however, the same code produces different results on other current browsers. The second div falls below the first, not the next line on the right. The result is very similar to a page without a float.
Solution
One of the solutions for this two-column layout, where a column can automatically resize, is to use a floating div for the first column, but remove the float from the column that must be resized. Because the floating bar and the normal document arrangement order are separate, the regular div will be placed above, but underneath the floating div. Add a padding to the left and make it equal to the width of the floating div, and the contents of the regular div will look like it's in a column to the right of the left Div. Example d illustrates this technique. The following code can produce the same effect in all of the current 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 standard than IE, but I personally think IE to generate floating elements of the effect is more consistent than the first two browsers. But if you don't take into account which build's effect is "correct", the difference can cause the Web builders the most vexing problems. To avoid problems with your page design, it is the first and most important step to know that the effects of browser generation are different.
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
