Css - three lines of three contour layout

Posted by john
2/21/2007
Related Tags:
div css layout  div layout  css layout  layout examples  css layout Record website 

  Translation from: In Search of the Holy Grail 
  Original: http://www.alistapart.com/articles/holygrail 
  This translation greengnn pages belongs to all, the first step to reprint please indicate the source: the creation of a structure 

  Xhtml began in header, footer, and container 
  <div Id="header"> </ div> 

  <div Id="container"> </ div> 

  <div Id="footer"> </ div> 
  css first definition of container, will be added to the sideleft, and left a Position sideright 
  # Container ( 
  Padding-left: 200px; / * LC Width * / 
  Padding-right: 150px; / * RC width * / 
  ) 
  We layout now looks like 

Uploads/200602/13_074820_diagram_01.gif

  Figure 1 - to create framework 

  Step 2: increased content elements 

  In the first step increase on the basis of content elements <div id = "header"> </ div> 

  <div Id="container"> 
  <div Id="center" class="column"> </ div> 
  <div Id="left" class="column"> </ div> 
  <div Id="right" class="column"> </ div> 
  </ Div> 

  <div Id="footer"> </ div> 
  Then the definition of widths and Float to elements arranged in a line, and remove footer floating alignment 
  # Container. Column ( 
  Float: left; 
  ) 
  # (Center 
  Width: 100%; 
  ) 
  # (Left 
  Width: 200px; / * LC width * / 
  ) 
  # (Right 
  Width: 150px; / * RC width * / 
  ) 
  # Footer ( 
  Clear: both; 
  ) 
  Here to the center elements of the definition of 100% width, it earned montainer of available space, the layout of such a 

Uploads/200602/13_074922_diagram_02.gif

  Figure 2: increased content elements 

  Step 3: the left into the right position 

  Left to put the correct position, we take two steps 

  1. To left and center left in the same horizon # ( 
  Width: 200px; / * LC width * / 
  Margin-left: 100%; 
  ) 
  Look at the results 

Uploads/200602/13_075000_diagram_03.gif

  Figure 3 - half left Mobile 

  2. With relative positioning of the left continue to move in the right place # container. Columns ( 
  Float: left; 
  Position: relative; 
  ) 
  # (Left 
  Width: 200px; / * LC width * / 
  Margin-left: 100%; 
  Right: 200px; / * LC width * / 
  ) 
  He left to the right elements from the center 200px, trip, finally left to its own position on the 

Uploads/200602/13_075037_diagram_04.gif

  Figure 4 - left to their own position 

  Step 4: Let right is the right to their own position. 

  From the map, we need only to right the overturned container-right Padding inside to see how to do 
  # (Right 
  Width: 150px; / * RC width * / 
  Margin-right:-150px; / * RC width * / 
  ) 
  Well, now they have the right elements of the naturalization. 

Uploads/200602/13_075115_diagram_05.gif

  Figure 5 - right to their proper position 

  Step 5: Let resolve bug layout more perfect if the browser window size changes, the center has become smaller than the left, and the layout was perfect break, we set up a body to the min-width 
  To solve this problem, because IE does not support him, they will not have a negative impact, adjusted as follows 
  Body ( 
  Min-width: 550px; / * 2x LC width RC width * / 
  ) 
  Then in IE6 (fully opened the window), left specific elements of the far left and then adjust 
  * (Left html # 
  Left: 150px; / * RC width * / 
  ) 
  These sizes have been adjusted in accordance with the above definition of width, and you have to adjust the time in accordance with their own reality. 

  Now increased padding 

  Content text containers close to the edge, I think you see, not very comfortable, to adjust 
  # (Left 
  Width: 180px; / * LC fullwidth - padding * / 
  Padding: 0 10px; 
  Right: 200px; / LC fullwidth * * / 
  Margin-left: 100%; 
  ) 
  Of course, we can not just get away even more left, to give a series of elements must be added, to increase the padding adjustment, the new bug, adjusted as follows 
  Body ( 
  Min-width: 630px; / * 2x (LC fullwidth 
  CC padding) RC fullwidth * / 
  ) 
  # Container ( 
  Padding-left: 200px; / LC fullwidth * * / 
  Padding-right: 190px; / * RC fullwidth CC padding * / 
  ) 
  # Container. Column ( 
  Position: relative; 
  Float: left; 
  ) 
  # (Center 
  Padding: 10px 20px; / * CC padding * / 
  Width: 100%; 
  ) 
  # (Left 
  Width: 180px; / * LC width * / 
  Padding: 0 10px; / * LC padding * / 
  Right: 240px; / * LC fullwidth CC padding * / 
  Margin-left: 100%; 
  ) 
  # (Right 
  Width: 130px; / * RC width * / 
  Padding: 0 10px; / * RC padding * / 
  Margin-right:-190px; / * RC fullwidth CC padding * / 
  ) 
  # Footer ( 
  Clear: both; 
  ) 

  / *** *** IE Fix / 
  * (Left html # 
  Left: 150px; / * RC fullwidth * / 
  ) Header and footer of padding can be increased, not mentioned here, there are units of length greater affinity with em (em allows users to use the browser to adjust to their own needs, the Font size) 


  However, the use or mix, and px em choice when more sensible to view the results 

  Contour problems elements used http://www.positioniseverything.net/articles/onetruelayout/equalheight 
  It was translated: http://www.blueidea.com/tech/web/2006/3210.asp 
  Mentioned method, not specific interpretation. 
  # Container ( 
  Overflow: hidden; 
  ) 
  # Container. Column ( 
  Padding-bottom: 20010px; / * X padding-bottom * / 
  Margin-bottom:-20000px; / * X * / 
  ) 
  # Footer ( 
  Position: relative; 
  ) 
  8 to resolve the opera bug, code adjusted as follows 
  <div Id="footer-wrapper"> 
  <div Id="footer"> </ div> 
  </ Div> (* html body 
  Overflow: hidden; 
  ) 
  * Html # wrapper (-footer 
  Float: left; 
  Position: relative; 
  Width: 100%; 
  Padding-bottom: 10010px; 
  Margin-bottom:-10000px; 
  Background: # fff; / * Same as body 
  Background * / 
  ) The end of this whole process, to see the final results through the w3c standard 

Related articles:

Web2.0 community will become the new darling why seen?
  Web2.0 Application of the new era of endless, but the central theme remains the same, personalized, is the largest grass-roots characteristics.    The new favorite in the community of Internet users, 2.0 is the most characteristics of the application.    In the recently h...
FLASH animated effects: the effect of paper with quote
  To this effect, spent almost a night time. Although later produced, is also very simple to achieve. Method is, after all, but thought out. Sense of achievement .. this is still very difficult effect to achieve its principles. Production is not very difficult. Limited to individuals limited c...
On the Web site planning
  The success or failure of a web site with the establishment of the pre-planning Web site has a very important relationship.    In the establishment of the construction site before the site should be clearly the purpose of determining the functionality of the website, identified site...
To: the use of Chinese. Com domain names Top 10 Reasons
  First, cover a broad area.    Chinese people throughout the world, accounting for more than 25 percent.    Chinese language barriers has become a stumbling block in the development of e-commerce.    The use of Chinese domain names more suitable for China's ...
SEO Study: What is a Google search box of sand
  During the past two years, Google on the most popular topic is one of Google's sand box effect (Sandbox Effect).    The so-called sand box effect refers to the new site in the Google ranking inside to obtain good, no matter how you optimize the site.    In other word...