Double Flying Wing layout deduction

Careful analysis of the technical implementation of the various layouts reveals that these three techniques are often used: floating (float), negative margin (negative margin), relative positioning (relative position). This is the implementation of the layout of the three most basic atomic technology, as long as the smart combination, and flexible use, you can "spell" the layout of the implementation of the scheme.

The two-wing layout is a flexible layout implementation, if the three column layout compared to a large bird, you can think of main as a bird body, sub and extra is the wings of birds. The idea for this layout is to put the most important parts of the body in place, and then move the wings to the right places.

consider the following DOM structure:　　

<DivID= "page">          <DivID= "HD"></Div>             <DivID= "BD">                      <Divclass= "Main"></Div>                      <Divclass= "Sub"></Div>                      <Divclass= "Extra"></Div>             </Div>         <DivID= "FT"></Div></Div>

use the negative margin of the floating element to locate:

. Main{float: Left;width:100%; }  
. Sub{float: Left;width:190px;Margin-left:-100%;
}
. Extra{float: Left;width:190px;Margin-left:-190px; }

So we get the first practice page, the effect is as follows:　　　　

As you can see, with a simple negative margin, the sub and the extra are positioned to the correct position. The remaining question is how to get main to the correct location. A natural idea is to add padding to Main's container #bd:

{                  padding: 0 230px 0 190px;    }

　The effect is as follows:　

This allows the main to be positioned in the correct position, but the sub and extra are not in the right position. This is a level of thinking. Now that the sub and extra are in the wrong place, try to adjust to the right position. Relative positioning Grand Debut:

. Sub{float: Left;width:190px;Margin-left:-100%;position:relative; Left:-190px; }. Extra{float: Left;width:230px;Margin-left:-230px;position:relative; Right:-230px; }

　　The final results are as follows:

Double Flying Wing layout deduction