DIV+CSS Web page making layout skills Learning _css/html

CSS layout common methods: Float:none|left|right
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 it works, look at a row of two columns of examples
Xhtml:

Here's the first column.
Here's the second column.
/* This is contrary to web-standard intent, just to show that the elements below it need to be cleared 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
Value:
Static: The default value. No special positioning, objects follow HTML positioning rules
Absolute: Drag objects from the document stream and use properties such as left,right,top,bottom to absolutely position them relative to the closest parent of the most positioned setting. If no such parent object exists, then the body object is based. And its cascade is defined by the Z-index property
Fixed: not supported. Object positioning is in absolute (absolute) mode. But to abide by some norms
Relative: objects are not stackable but will be offset in normal document flow based on attributes such as Left,right,top,bottom

It comes with an example of two columns in a row
Xhtml:

Here's the first column.
Here's the second column.

Css:
#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 relatively positioned, it will change with the size and resolution of the browser, and position will not, so the general situation is still float layout!

CSS Common layout examples

Single Row 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 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 of 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 three columns

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

float positioning
Xhtml:


Here's the first column.
Here's the second column.
/* Usage Web standards are not recommended, but remember that the following elements need to be cleared floating */

This is the third column.
/* Usage Web standards are not recommended, but remember that the following elements need to be cleared floating */

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

Thisisthemaincontent.

Thisistheleftsidebar.

Thisistherightsidebar.

Css
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;
}

/***iefix***/
*html#left{
left:190px;/*rcfullwidth*/
}

Two rows of three columns
Xhtml:

This is the top row.


Here's the first column.
Here's the second column.


This is 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 row.


Here's the first column.
Here's the second column.


This is the third column.


This is the bottom row.
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: Here is a list of common examples, not research, for each box, I did not set the properties of Margin,padding,boeder, because I personally feel that the width of the positioning, it is best not to use them, unless use, because if not, Solve the browser compatibility problem, will make you headache, and produce a series of CSS code, I think this efficiency and effect is not good!

CSS Layout Advanced Tips
Margin and padding are always possible to use, and how to solve the problem? Because the browser interprets container widths in different ways:
Ie6.0firefoxopera and so on are
True width =width padding border margin
IE5. X
True width =width-padding-border-margin

IE there are floating objects in the double-distance bug (Iedoubledfloat-marginbug), here also need to solve specific problems, the following is the solution www.forest53.com/tutorials/tutorials_show.asp?id=31

Obviously, the first kind of very perfect layout in the second case the consequences are very miserable!
The solution is hack
div.content{
width:400px;//This is the wrong width, all browsers read the
voice-family: "\"}\ "";//ie5. X/win the contents of "\"}\ "" are ignored
Voice-family:inherit;
width:300px;//some browsers, including Ie6/win, read this sentence, and the new value (300px) covers the old
}
Html>body.content{//html>body is CSS2.
width:300px;//support CSS2 the written browser (non-IE5) was fortunate enough to read this sentence
}

div.content{
width:300px!important;//This is the correct width, most browsers that support!important tag use the values here
Width (space)/**/:400px;//ie6/win do not parse this sentence, so Ie6/win still think that the value of width is 300px, and Ie5.x/win read this sentence, the new value (400px) covered out the old, because! Important tag doesn't work on them
}
Html>body.content{//html>body is CSS2.
width:300px;//support CSS2 The browser was fortunate enough to read this sentence.
}

Column and other high skills
n row n column layout, each column height (in advance and not determine which column height) of the same, is the goal of each designer to pursue, the practice is: Background map fill, add JS script
Method and container overflow partially hide and column the negative bottom boundary and positive internal patches combined method.

Background Map Fill 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;}

is to duplicate a picture of a npx width in the outer container vertically, positioning the two columns in a staggered position to repeat vertically, visually creating the illusion of two columns of height.

