Introduction of double Wing layout (chalice Layout)-Started with Taobao ued

Careful analysis of the technical implementation of various layouts, you can find that the following three technologies are often used: floating float negative margin negative margin relative positioning relative position

This is the three most basic atomic technology to implement the layout. As long as clever combination, and flexible use, you can "spell" a variety of layout of the implementation plan.

The way to try is to consider the following DOM structure:

[HTML] View plain Copy <div id= "page" >              <div id= "HD" ></div>                 <div id= "BD" >                         <div class= "Main" ></div>                          <div class= "Sub" ></div>                           <div class= "Extra" ></div>                 </div>             <div id= "FT" ></div>   </div>  

Use the negative margin of the floating element to locate:

[HTML] View Plain Copy .main {                       float: left;                      width: 100%;        }     .sub {                     float: left;                       width:  190px;                       margin-left: -100%;      }       .extra {                         float: left;                         width: 190px;                          margin-left: -190px;       }  

So we got the first try page click here to view the effect
As you can see, with the simple negative margins, the sub and extra have been positioned to the correct location. The remaining question is how to get main to be positioned in the right place.
A natural idea is to add padding to the container #bd of main:

[CSS] view plain copy #bd {padding:0 230px 0 190px; }

Click here to view the effect

This allows main to be positioned in the correct position, but the sub and extra are in the wrong position. This is a thought of the checkpoint. Since the sub and extra are not in the right position, try to adjust to the correct position. The relative positioning of the grand debut:

[CSS] View Plain Copy .sub {                       float: left;                       width: 190px;                        margin-left: -100%;                       position: relative;                       left: -190px;       }       .extra {                          float: left;                         width: 230px;                         margin-left: -230px;                          position: relative;                         right: -230px;       }  

Click here to view the completion page

Obviously, this is the Holy Grail layout.
I tried all kinds of ideas without adding any extra tags, but I never found the perfect layout (the Grail layout is the closest thing I've ever thought to perfection).
Since no extra tags are added, the implementation of the perfect layout is so difficult that if an extra tag is allowed to be added. Taobao ued inside the discussion, add a layer to main package: [CSS] view plain copy <div id= "main" class= "column" > <div id= "main-c Ontent "> #main </div> </div>

The function of the inner main-content is to locate the main position and conveniently set the properties such as padding. Think of here, just as Newton was the apple smashed silly, the original main positioning problem solved: [CSS] view plain copy <div id= "page" > <div i d= "BD" > <div class= "main" ></div> </div> </ Div>

CSS only needs to add one row: [CSS] view plain copy. Main-wrap {margin:0 230px 0 190px;}

Want to see example4 effect dot here
It's all so simple. In addition to adding an extra tag, all the other aspects of the performance are perfect (try IE5.5, no problem). Currently only use the floating and negative margins, if the introduction of relative positioning, but also to achieve the three-column layout of the various combinations[CSS] View Plain Copy .extra {                        float: left;                        width: 230px;                         margin-left: -100%;                       position: relative;                          left: 190px;                 }       .main-wrap {                               margin-left: 430px;                        }  

Click here to view the Example5 effect

With a closer look at the source code for EXAMPLE5 and Example4, you can see that the DOM structure is exactly the same, with only a slightly different CSS. This means that the HTML structure and CSS layout are decoupled to some extent, and when we develop HTML code, we start with the content without having to think too much about the layout. This is the embodiment of progressive enhancement in the front-end workflow.
If you compare the three column layout to a large bird, you can think of main as the body of the bird, and the sub and extra are the wings of the bird. The idea of this layout is to put the most important body parts first and then move the wings to the right place. So please allow me to name this layout as a double wing layout (Flying Swing Layout).
As the birds in the picture above have all kinds of postures, we can also implement various layouts using the double wing layout. Here is a try page, using a double wing, to achieve a grid layout system.

The advantages of the content and layout of the separation, that is, Eric mentioned Any-order Columns. The main part is adaptive width and is easy to switch between a fixed-width layout and a fluid layout. Any column can be the top bar, no problem. The need for hack is very small (for a IE6 purge floating hack:_zoom:1;) The compatibility on the browser is very good, IE5.5 above all support.

Insufficient main needs to add an extra layer of wrapping. Wait for your discovery and feedback.

The layout of the wings is very flexible, as long as the CSS code can be adjusted to handle everything. I recently tried to use this layout in a forum project. Hope that we have a better layout method must be more to share.

[HTML] View plain copy