Common methods and techniques of DIV+CSS Web page layout

css| Skills | Web page

　　Common methods for CSS layout

Float:none|left|right
Take value:
None: default value. object does not float
Left: text flows to the right of the object
Right: text flows to the left of the object

　　How does it work, look at a row and two columns of examples

　　XHTML code:
Example Source Code

here is the first column

here is the second column

/* This is contrary to the Web standard intent, just to show that the elements underneath it need to be cleared for floating * *

　　CSS code:
Example Source Code

#wrap {Width:100;height:auto;}
#column1 {float:left;width:40;}
#column2 {float:right;width:60;}
. Clear{clear:both;}

　　Position:static|absolute|fixed|relative

Take value:
Static: default value. No special location, objects follow HTML positioning rules
Absolute: drag objects out of the document stream, using attributes such as Left,right,top,bottom to be absolutely positioned relative to the parent object closest to one of the most positioned settings. If no such parent object exists, it is based on the body object. And its cascade is defined by the Z-index property
Fixed: not supported. Object positioning conforms to an absolute (absolute) approach. But there are some rules to follow.
Relative: objects cannot be stacked, but will be offset in the normal document stream based on attributes such as Left,right,top,bottom

　　it to implement an example of a row and two columns

　　XHTML code:
Example Source Code

here is the first column

here is the second column

　　CSS code:
Example Source Code [www.52css.com]
#wrap {position:relative;/* relative positioning */width:770px;}
#column1 {position:absolute;top:0;left:0;width:300px;}
#column2 {position:absolute;top:0;right:0;width:470px;}

　　What is the difference between them?

　　Obviously, float is relative positioning, will change with the browser size and resolution changes, and position is not, so generally or float layout!

　　 CSS Common layout instances

　　 single row one column
Example Source Code

Body{margin:0px;padding:0px;text-align:center;}
#content {margin-left:auto;margin-right:auto;width:400px;}

　　 two rows and one column
Example Source Code

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 one column
Example Source Code

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 two columns
Example Source Code

#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, two columns.
Example Source Code

#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, two columns
Example Source Code

#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 three columns
Absolute positioning
Example Source Code

#left {position:absolute;top:0px;left:0px;width:120px;}
#middle {margin:0px190px0px190px;}
#right {position:absolute;top:0px;right:0px;width:120px;}

float locates a
XHTML code:
Example Source code

This is the first column

This is the second column

/* usage Web standards are not recommended, but remember that the following elements need to be cleared for floating */

This is the third column.

/* usage Web standards are not recommended, but remember that the following elements need to be cleared for floating/



Strong>css code:
Example Source code

#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 positioning two

　　XHTML Code :
Example Source Code

Thisisthemaincontent.

Thisistheleftsidebar.

Thisistherightsidebar.

　　 CSS code:
Example Source Code

body{
margin:0;
padding-left:200px;/*lcfullwidth*/
Padding-right:190px;/*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:190px;/*rcwidth*/
margin-right:-100;
}