1.CSS layout of the commonly used methods: 
  Float: none | left | right 

  Value: 
  None:  default values.    Object does not float 
  Left:  text flows to the right targets 
  Right:  text flows to the left of target 

  It is how to work, a look at his two examples 

  Xhtml: 

  <div Id="warp"> 
  <div Id="column1"> here is the first out </ div> 
  <div Id="column2"> here is the second list </ div> 
  <div Class="clear"> </ div> 
  </ 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 

  Value: 

  Static:  default values.    No special positioning, positioning objects follow the Rules of HTML 
  Absolute:  target will be pulled out from the stream of documents, the use of left, right, top, bottom, and other attributes of its closest relative is one of the most patriarchal orientation of the target set for absolute positioning.    If there is no such object father, is based on body object.    And its Cascading through the z-index Attribute definition 
  Fixed:  not support.    Object Orientation absolute compliance with the (absolute) way.    However, to comply with norms 
  Relative:  object of the stack, but will be based on the left, right, top, bottom, and other attributes in the document flow in the normal Position shift 

  It to achieve his two examples 

  Xhtml: 

  <div Id="warp"> 
  <div Id="column1"> here is the first out </ div> 
  <div Id="column2"> here is the second list </ 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;) 

  Where the distinction between them? 

  Clearly, the relative positioning of the float, with the browser will be the size and resolution of changes in change, and position on the die, so under normal circumstances or Float layout! 

  Common examples of the layout 2.CSS 

  A single one 

  Body (margin: 0px; padding: 0px; text-align: center;) 
  # Content (margin-left: auto; margin-right: auto; width: 400px;) 

  Two lines of a 

  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 lines of a 

  Body (margin: 0px; padding: 0px; text-align: center;) 
  # Content-top (margin-left: auto; margin-right: auto; width: 400px;) 
  # Content-mid (margin-left: auto; margin-right: auto; width: 400px;) 
  # Content-end (margin-left: auto; margin-right: auto; width: 400px;) 

  Two separate two 

  # Bodycenter (width: 700px; margin-right: auto; margin-left: auto; overflow: auto;) 
  # # Dv1 bodycenter (float: left; width: 280px;) 
  # # Dv2 bodycenter (float: right; width: 410px;) 

  Two lines two 

  (# Header width: 700px; margin-right: auto; margin-left: auto; overflow: auto;) 
  # Bodycenter (width: 700px; margin-right: auto; margin-left: auto; overflow: auto;) 
  # # Dv1 bodycenter (float: left; width: 280px;) 
  # # Dv2 bodycenter (float: right; width: 410px;) 

  Three lines 2 

  (# Header width: 700px; margin-right: auto; margin-left: auto;) 
  # Bodycenter (width: 700px; margin-right: auto; margin-left: auto;) 
  # # Dv1 bodycenter (float: left; width: 280px;) 
  # # Dv2 bodycenter (float: right; width: 410px;) 
  # Footer (width: 700px; margin-right: auto; margin-left: auto; overflow: auto;) 

  Three separate 3 absolute positioning 

  # (Left position: absolute; top: 0px; left: 0px; width: 120px;) 
  # Middle (margin: 20px 190px 20px 190px;) 
  # (Right position: absolute; top: 0px; right: 0px; width: 120px;) 

  Float positioning 

  Xhtml: 

  <div Id="warp"> 
  <div Id="column"> 
  <div Id="column1"> here is the first out </ div> 
  <div Id="column2"> here is the second list </ div> 
  <div Class="clear"> </ div> 
  </ Div> 
  <div Id="column3"> here is the third out </ div> 
  <div Class="clear"> </ div> 
  </ 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;) 

  The float position 

  Xhtml: 

  <div Id="center" class="column"> 
  <h1> This is the main content. </ H1> 
  </ Div> 
  <div Id="left" class="column"> 
  <h2> This is the left sidebar. </ H2> 
  </ Div> 
  <div Id="right" class="column"> 
  <h2> This is the right sidebar. </ H2> 
  </ Div> 

  CSS: 

  Body (margin: 0; padding-left: 200px; padding-right: 190px; min-width: 240px;) 
  . Column (position: relative; float: left;) 
  # (Center width: 100%;) 
  # (Left width: 180px; right: 240px; margin-left: 100%;) 
  # (Right width: 130px; margin-right: 100%;) 

  Two rows of three 

  Xhtml: 

  <div Id="header"> here is the top line </ div> 
  <div Id="warp"> 
  <div Id="column"> 
  <div Id="column1"> here is the first out </ div> 
  <div Id="column2"> here is the second list </ div> 
  <div Class="clear"> </ div> 
  </ Div> 
  <div Id="column3"> here is the third out </ 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 lines 3 

  Xhtml: 

  <div Id="header"> here is the top line </ div> 
  <div Id="warp"> 
  <div Id="column"> 
  <div Id="column1"> here is the first out </ div> 
  <div Id="column2"> here is the second list </ div> 
  <div Class="clear"> </ div> 
  </ Div> 
  <div Id="column3"> here is the third out </ 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 the list of common examples, rather than research purposes, each on a box, I have not set margin, padding, boeder and other attributes, because I personally think that contain Width positioning when using the best bad to them, unless a necessity, because if this is not the case, resolve the browser compatibility problems will let you headaches, but also created a series of css code, I think that the efficiency and effectiveness are not good! 

  High 3.CSS layout skills 

  Margin and Padding always be possible to use, and how to solve the problems?    As explained containers browser width of the different methods: 

  IE 6.0, such as Firefox Opera is true width = width + padding + + margin border 
IE5.X
  True width = width-padding-border-margin 

  Obviously, the first one under the layout is perfect in the second case is very sad consequences! 

  The solution is hack 

  Click on the link below specific explanation Show 

  Www.blueidea.com/tech/site/2006/3170.asp 
  Www.jluvip.com/blog/article.asp?id=114 

  Out contour skills 

  N n line layout in each column Height (in advance and can not determine which are the height of) the same, each designer is the pursuit of the objective of practice: Background filling, and the methods and JS script overflow containers out of hiding and negative at the end of the Border and padding is the method of combining. 

  Filling of background: 

  Xhtml: 

  <div Id="wrap"> 
  <div Id="column1"> This is the first out </ div> 
  <div Id="column1"> This is the second out </ div> 
  <div Class="clear"> </ div> 
  </ Div> 

  Css: 

  # Wrap (width: 776px; background: url (bg.gif) repeat-y 300px;) 
  # Column1 (float: left; width: 300px;) 
  # Column2 (float: right; width: 476px;) 
  . Clear (clear: both;) 

  Div.content ( 
  Width: 400px; / / This is the wrong width, all browsers read 
  Voice-family: "\") \ ""; / / IE5.X/win overlooked the "\") \ "" After the contents of 
  Voice-family: inherit; 
  Width: 300px; / / IE6/win, including part of the browser to read this, the new numerical (300 px) cover off the old 
  ) 
  Html> body. Content (/ / html> body is the wording CSS2 
  Width: 300px; / / support CSS2 the wording of the browser (IE5) fortunate enough to read this one 
  ) 

  Div.content ( 
  Width: 300px! Important; / / This is the right width, the majority support! Important marker browser use Numerical here 
  Width (box )/**/: 400 px; / / IE6/win this is not analytical, IE6/win remain of the view that the value of width is 300 px; IE5.X/win read this, the new numerical (400 px ) coverage swap of the old, because! important marker of their non-functional 
  ) 
  Html> body. Content (/ / html> body is the wording CSS2 
  Width: 300px; / / support CSS2 the wording of the browser fortunate enough to read this one 
  )