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

CSS layout common methods: 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:
<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 contrary to the Web standard intent, just to show that the elements underneath it need to be cleared for floating * *
</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
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 normal document flow based on attributes such as Left,right,top,bottom

It to implement an example of a 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 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
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, 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, 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:
<div id= "wrap"
<div id= "column"
<div id= "Column1" > This is the first column </ Div>
<div id= "Column2" > here is the second column </div>
<div class= "clear" ></div>/* usage Web standards are not recommended, But remember that the following elements need to clear the floating */
</div>
<divid= "Column3" > here is the third column </div>
<divclass= "Clear" ></ div>/* usage Web standards are not recommended, but remember that the following elements need to clear the floating */
</div>
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
<div id= "center" class= "column" >
</div>
<div id= "left" class= "column" >
</div>
<div id= "Right" class= "column" >
</div>
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, three columns.
Xhtml:

<div id= Header > here is the top row </div>
<div id= "Warp"
<div id= "column"
<div id= " Column1 "> Here is the first column </div>
<div id=" Column2 "> This is the second column </div>
<div class=" Clear "></ Div>
</div>
<div id= "Column3" > This is the third column </div>
<div class= "Clear" ></div>
</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;}

Three rows, 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" > This is 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: Here is a list of commonly used examples, rather than the use of research, for a single box, I have not set margin,padding,boeder and other attributes, because I personally feel that with the width of the positioning, it is best not to use them, unless the Birburd, because if not so, Solve the browser compatibility problem, will make you headache, and produce a series of CSS code, I think this efficiency and effect are not good!

CSS Layout Advanced Techniques
Margin and padding are always likely to be used, and the problems that arise are solved? Because the browser interprets the container width in different ways:
Ie6.0firefoxopera etc is
True width =width padding border margin
IE5. X
True width =width-padding-border-margin

The double distance bug (iedoubledfloat-marginbug) in IE with floating object, here also need specific problem specific solution, the following is the solution www.forest53.com/tutorials/tutorials_show.asp?id=31

Obviously, the first kind of 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 ignores the contents of "\"}\ ""
Voice-family:inherit;
Some browsers, including Ie6/win, read the phrase, and the new value (300px) covers the old width:300px;//.
}
Html>body.content{//html>body is the writing of CSS2.
width:300px;//Support CSS2 Browser (non-IE5) has the honor to read this sentence
}

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

Column and other high skills
n row n column layout, each column height (cannot determine which column height in advance) is the same, is each designer pursues the goal, the practice has: the background picture fills, adds the JS script the
Methods are combined with the container overflow part hiding and the negative bottom boundary of the column and the positive inner patches.

Background Figure 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;}

is a picture of a npx wide in the external container longitudinal repeat, positioning to two rows of staggered position longitudinal repeat, in the visual produce two rows of altitude illusion.