How to create and layout a DIV + CSS webpage _ CSS/HTML

Common CSS layout Methods: float: none | left | right
Valid value:
None: default value. Objects are not float
Left: Right of the text flow object
Right: Left side of the text flow object

How does it work? Let's look at an example of one row and two columns.
Xhtml:

Here is the first column

The second column

/* This is against the web standard intent, just want to explain that the elements under it need to clear the floating */

CSS:
# Wrap {width: 100; height: auto ;}
# Column1 {float: left; width: 40 ;}
# Column2 {float: right; width: 60 ;}
. Clear {clear: both ;}

Position: static | absolute | fixed | relative
Valid value:
Static: default value. No special positioning. Objects follow HTML positioning rules.
Absolute: drag an object out of the Document Stream and use left, right, top, bottom, and other attributes to absolutely locate the parent object with the most positioning settings relative to the object closest to it. If such a parent object does not exist, it is based on the body object. Its stack is defined by the z-index attribute.
Fixed: not supported. Object positioning follows the absolute (absolute) method. But comply with some rules
Relative: objects cannot be stacked, but will be offset in normal document streams based on left, right, top, bottom, and other attributes.

It is used to implement the example of one row and two columns.
Xhtml:

Here is the first column

The second column

CSS:
# Wrap {position: relative;/* relative position */width: 770px ;}
# Column1 {position: absolute; top: 0; left: 0; width: 300px ;}
# Column2 {position: absolute; top: 0; right: 0; width: 470px ;}
What are their differences?
Apparently, float is relatively positioned, and will change with the browser size and resolution, but the position will not work, so it is usually the float layout!

Examples of common CSS la s

Single Row and one column
Body {margin: 0px; padding: 0px; text-align: center ;}
# Content {margin-left: auto; margin-right: auto; width: 400px ;}

Two rows and one column
Body {margin: 0px; padding: 0px; text-align: center ;}
# Content-top {margin-left: auto; margin-right: auto; width: 400px ;}
# Content-end {margin-left: auto; margin-right: auto; width: 400px ;}

Three rows and one column
Body {margin: 0px; padding: 0px; text-align: center ;}
# Content-top {margin-left: auto; margin-right: auto; width: 400px; width: 370px ;}
# Content-mid {margin-left: auto; margin-right: auto; width: 400px ;}
# Content-end {margin-left: auto; margin-right: auto; width: 400px ;}

Single Row and two columns
# Bodycenter {width: 700px; margin-right: auto; margin-left: auto; overflow: auto ;}
# Bodycenter # dv1 {float: left; width: 280px ;}
# Bodycenter # dv2 {float: right; width: 420px ;}

Two rows and two columns
# Header {width: 700px; margin-right: auto; margin-left: auto; overflow: auto ;}
# Bodycenter {width: 700px; margin-right: auto; margin-left: auto; overflow: auto ;}
# Bodycenter # dv1 {float: left; width: 280px ;}
# Bodycenter # dv2 {float: right; width: 420px ;}

Three rows and two columns
# Header {width: 700px; margin-right: auto; margin-left: auto ;}
# Bodycenter {width: 700px; margin-right: auto; margin-left: auto ;}
# Bodycenter # dv1 {float: left; width: 280px ;}
# Bodycenter # dv2 {float: right; width: 420px ;}
# Footer {width: 700px; margin-right: auto; margin-left: auto; overflow: auto; clear: both ;}

Single Row and three columns

Absolute Positioning
# Left {position: absolute; top: 0px; left: 0px; width: 120px ;}
# Middle {margin: 0px1_px0px1_px ;}
# Right {position: absolute; top: 0px; right: 0px; width: 120px ;}

Float positioning
Xhtml:

Here is the first column

The second column

/* Usage of web standards is not recommended, but remember that the following elements need to be cleared */

The third column

/* Usage of web standards is not recommended, but remember that the following elements need to be cleared */

CSS:
# Wrap {width: 100; height: auto ;}
# Column {float: left; width: 60 ;}
# Column1 {float: left; width: 30 ;}
# Column2 {float: right; width: 30 ;}
# Column3 {float: right; width: 40 ;}
. Clear {clear: both ;}

Float Location 2
Xhtml

Thisisthemaincontent.

Thisistheleftsidebar.

Thisistherightsidebar.

CSS
Body {
Margin: 0;
Padding-left: 200px;/* LCfullwidth */
Padding-right: pixel PX;/* RCfullwidth CCpadding */
Min-width: 200px;/* LCfullwidth CCpadding */
}
. Column {
Position: relative;
Float: left;
}
# Center {
Width: 100;
}
# Left {
Width: 200px;/* LCwidth */
Right: 200px;/* LCfullwidth */
Margin-left:-100;
}
# Right {
Width: pixel PX;/* RCwidth */
Margin-right:-100;
}

/*** IEFix ***/
* Html # left {
Left: pixel PX;/* RCfullwidth */
}

Two rows and three columns
Xhtml:

This is the top line

Here is the first column

The second column

The third column

CSS:
# Header {width: 100; height: auto ;}
# Wrap {width: 100; height: auto ;}
# Column {float: left; width: 60 ;}
# Column1 {float: left; width: 30 ;}
# Column2 {float: right; width: 30 ;}
# Column3 {float: right; width: 40 ;}
. Clear {clear: both ;}

Three rows and three columns
Xhtml:

This is the top line

Here is the first column

The second column

The third column

Here is the bottom line

CSS:
# Header {width: 100; height: auto ;}
# Wrap {width: 100; height: auto ;}
# Column {float: left; width: 60 ;}
# Column1 {float: left; width: 30 ;}
# Column2 {float: right; width: 30 ;}
# Column3 {float: right; width: 40 ;}
. Clear {clear: both ;}
# Footer {width: 100; height: auto ;}

PS: Common examples are listed here, not for research purposes. For each box, I have not set attributes such as margin, padding, and boeder, because I personally think, when positioning the width, it is better to use them unless you have to, because if not, solving the browser compatibility problem will cause you a headache and generate a series of CSS code, I think this is not efficient and effective!

Advanced CSS layout skills
Margin and padding are always used. How can we solve the problems? Because the browser explains the container width differently:
IE6.0FirefoxOpera and others are
Real width = width padding border margin
IE5.X
True width = width-padding-border-margin

IE has the BUG of double distance of floating objects (IEDoubledFloat-MarginBug). Here we need to solve the specific problem. The following is a solution www.forest53.com/tutorials/tutorials_show.asp? Id = 31

Obviously, the first option is perfect. In the second case, the result is miserable!
The solution is hack.
P. content {
Width: 400px; // This is the incorrect width, which is read by all browsers.
Voice-family: "\"} \ "; // IE5.X/win ignores the content after "\ "} \"
Voice-family: inherit;
Width: 300px; // Some browsers including IE6/win read this sentence. The new value (300px) overwrites the old one.
}
Html> body. content {// html> body is written in CSS2.
Width: 300px; // the browser that supports CSS 2 (non-IE5) has the honor to read this sentence.
}

P. content {
Width: 300px! Important; // This is the correct width, most of which are supported! The browser marked with important uses the value here
Width (Space)/**/: 400px; // IE6/win does not parse this sentence, so IE6/win still thinks that the width value is 300px; when IE5.X/win reads this sentence, the new value (400px) overwrites the old one because! Important flag does not work for them
}
Html> body. content {// html> body is written in CSS2.
Width: 300px; // the browser that supports CSS2 is lucky enough to read this sentence.
}

High Column skills
The layout of n rows and n columns is the same as the height of each column (the height of which column cannot be determined beforehand), which is the goal pursued by each designer. The practices include filling the background image and adding JS scripts.
The method is used to hide the overflow part of the container and combine the negative bottom boundary of the column with the positive internal patch.

Background Image filling method:
Xhtml:

This is the first column

This is the second column

Css:
# Wrap {width: 776px; background: url(bg.gif) repeat-y300px ;}
# Column1 {float: left; width: 300px ;}
# Column2 {float: right; width: 476px ;}
. Clear {clear: both ;}

It means to repeat an image with npx width vertically in an external container and locate the vertical repetition at the staggered positions of the two columns. This visually creates the illusion that the two columns are of the same height.