Some common situations of typesetting confusion in HTML and DIV+CSS Web page making

For the Web front-end beginners or less experienced people, the page layout is not uncommon to be confused, sometimes the previous part of the page is very neat and beautiful, but in the next part of the page will often appear chaos, such as content can not be adjusted to the developer needs of the location, Or the appearance of overlapping pages. The following is my personal in the Web page production process on the Web page layout confusion and its solutions to some of the experience of the summary, shortcomings, I hope that we complement each other to learn.

Causes and solutions of DIV+CSS Web page dislocation

Often we encounter the layout that we want to set on one line, but for a variety of reasons caused dislocation, see the result is in a row of the last box layout dislocation fell down (such as).

The cause of the div CSS page layout dislocation is probably two cases, one is the width calculation error, one is IE bug caused, especially IE6 and IE7. Next we introduce the dislocation and solve the dislocation method next to you.

One, Width calculation error Resolution method

Width calculation error, if the total width of 500px, there are 3 boxes, respectively, CSS width of 200px, 200px, 100px, this no problem will be in a row display will not be misplaced, but if you add CSS border, padding, margin properties, do not forget the width of these properties. In particular padding and border border occupy the width of space do not ignore. If there is a box added to the left and right border, this time there is a box in just the appropriate width to reduce the width of the 2px frame, otherwise it will total 3 boxes total width is greater than the total width, resulting in dislocation.

Width problem caused CSS layout dislocation summary:
The sum of the inner box width is greater than the external width caused dislocation, check when we must calculate the width of the set, border, Paddind, margin and the sum.

Second, IE bug, especially IE6 and IE7 caused dislocation

This problem is the most common problem, we check the 1th width problem, and width is not a problem, this time in IE6, IE7 dislocation, in IE8 and other browsers no dislocation problem, this time we have to consider whether you use the margin property, usually we use CSS floating (CSS float) The use of margin (margin-right, Margin-left here especially this property) will result in double the value, this time we need to use CSS hack to solve this problem. Let IE6 or IE7 individually identify the special margin style.

Such as:
1, IE6 alone identification (Margin-left for only IE6 dislocation case)
{margin-left:5px;_margin-left:2px}
This time except IE6 other browser set margin-left:5px,ie6 separate identification _margin-left:2px

2, IE7 and IE6 are recognized (Margin-left for IE6 and IE7 identify other versions and brand browser does not set)
{margin-left:5px;*margin-left:2px;}
This time except IE6 and IE7, other browsers set MARGIN-LEFT:5PX,IE6 and IE7 identify *margin-left:2px

More CSS hack knowledge you can enter the CSS hack section to learn more about the relevant knowledge.

Thought for everybody summarizes the common page dislocation reason, everybody from above two aspects to check the CSS layout page dislocation reason.

-----------------------------------------above Content section reference URL http://www.divcss5.com/css-hack/c397.shtml

Floating will cause overlapping of page layout, which is very common in Web page making, we can use the following methods to clear the impact of floating;

1. The root cause of the float effect is that the parent tag has no height and causes the cursor to move. If the parent label is set to a fixed height. Can solve the problem caused by floating

2, to be affected by the floating label set clear both to clear the impact of floating

3, Overflow:hidden; Set content out of the section

In addition to the above-mentioned width calculation errors and the impact of floating caused the page layout confusion, the following situations can also lead to confusion in the page layout

1,margin vertical collapse Phenomenon

Margin between Labels:

The phenomenon of vertical collapse-----dominated by large

No collapse in horizontal direction

2, if the word label with margin to describe and the parent tag location relationship, may appear margin exposure,

Add Overflow:hidden to Parent tag;

You can use padding instead of the margin to describe the position of the parent tag, the margin is replaced with padding, and the parent tag is reduced to the corresponding height.

Some common situations of typesetting confusion in HTML and DIV+CSS Web page making