Div + CSS webpage creation and layout skills

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:
<Div id = "Wrap">
<Div id = "column1"> here is the first column </div>
<Div id = "column2"> here is the second column </div>
<Div class = "clear"> </div>/* this is against the web standard intent, just to explain that the elements under it need to be cleared */
</Div>
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:
<Div id = "Wrap">
<Div id = "column1"> here is the first column </div>
<Div id = "column2"> here is the second column </div>
</Div>
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:

the first column

here is the second column

/* usage Web Standard not recommended, but remember that the following elements need to be cleared */

here is 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 ;}< BR ># column1 {float: Left; width: 30 ;}< BR ># column2 {float: right; width: 30 ;}< BR ># column3 {float: Right; width: 40 ;}< br>. clear {clear: Both ;}

Float Location 2
XHTML
<Div id = "center" class = "column">
<H1> thisisthemaincontent. </Div>
<Div id = "Left" class = "column">
<H2> thisistheleftsidebar. </H2>
</Div>
<Div id = "right" class = "column">
<H2> thisistherightsidebar. </H2>
</Div>
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

here is the second column

the third column

CSS:
# header {width: 100; Height: auto ;}< BR ># wrap {width: 100; Height: auto ;}< BR ># column {float: left; width: 60 ;}< BR ># column1 {float: Left; width: 30 ;}< BR ># column2 {float: Right; width: 30 ;}
# column3 {float: Right; width: 40 ;}< br>. clear {clear: Both ;}

Three rows and three columns
XHTML:
<Div id = "Header"> This is the top line </div>
<Div id = "Wrap">
<Div id = "column">
<Div id = "column1"> here is the first column </div>
<Div id = "column2"> here is the second column </div>
<Div class = "clear"> </div>
</Div>
<Div id = "column3"> the third column </div>
<Div class = "clear"> </div>
</Div>
<Div id = "footer"> here is the bottom line </div>
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, it is better to use them when positioning the width, unless it is necessary, because if it is not the case, solving the browser compatibility problem will cause you a headache and generate a series of CSSCode, 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.
Div. 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.
}

Div. 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:
<Div id = "Wrap">
<Div id = "column1"> This is the first column </div>
<Div id = "column1"> This is the second column </div>
<Div class = "clear"> </div>
</Div>
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.