Common methods and techniques for div CSS webpage Layout

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.
XHTMLCode: Example source code[Www.52css.com]<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 code: Example source code[Www.52css.com]# 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 code: Example source code[Www.52css.com]<Div id = "Wrap">
<Div id = "column1"> here is the first column </div>
<Div id = "column2"> here is the second column </div>
</Div>

CSS code: Example source code[Www.52css.com]# 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 columnExample source code[Www.52css.com]Body {margin: 0px; padding: 0px; text-align: center ;}
# Content {margin-left: auto; margin-Right: auto; width: 400px ;}

Two rows and one columnExample source code[Www.52css.com]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 columnExample source code[Www.52css.com]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 columnsExample source code[Www.52css.com]# 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 columnsExample source code[Www.52css.com]# 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 columnsExample source code[Www.52css.com]# 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 PositioningExample source code[Www.52css.com]# 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 1
XHTML code: Example source code[Www.52css.com]<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>/* usage of web standards is not recommended, but remember that the following elements need to be cleared */
</Div>
<Divid = "column3"> the third column </div>
<Divclass = "clear"> </div>/* usage of web standards is not recommended, but remember that the following elements need to be cleared */
</Div>

CSS code: Example source code[Www.52css.com]# 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 code: Example Source Code [www.52css.com]

thisisthemaincontent.

thisistheleftsidebar.

thisistherightsidebar.

CSS code: Example Source Code [www.52css.com] body {
margin: 0;
padding-left: 200px;/* lcfullwidth */
padding-Right: 190px;/* rcfullwidth ccpadding */
Min-width: 200px; /* lcfullwidth ccpadding */
}< br>. column {
position: relative;
float: Left;
}< BR ># center {
width: 100;
}< BR ># left {
width: 200px;/* lcwidth */
right: 200px; /* lcfullwidth */
margin-left:-100;
}< BR ># right {
width: pixel PX; /* rcwidth */
margin-Right:-100;
}