Div + CSS three-column layout

1. Requirements: for example, the layout of the three columns in the middle is the width of the adaptive browser, the left fixed width 200px, And the right fixed width 200px;

. Right,. Left{Height:300px;Width:200px;}. Right{Float:Right;Background:#000000;}. Left{Float:Left;Background:#009933;}. Main{Background:# F60;Height:300px;}
 

      < Div  Class  = "Right"  > Right </  Div  >      <  Div  Class  = "Left"  > Left </  Div  >      <  Div Class  = "Main"  > Main </  Div  >     

2. Now we need to load Mian First. Other requirements are the same as above;

Conclusion: It mainly uses the negative margin of floating elements;

In addition, to understand float and absolute positioning, the width of these two elements is based on the width of the content.

For relative positioning and block-level elements, if no fixed width is set, the values are 100% (relative to the parent-Level Width)

Download demo

 . Boxmain { Float : Left ;Margin-Right : -200px ; Width : 100% ;} . Right,. Left { Height : 300px ; Width : 200px ; Z-Index : 1 ;} . Right { Position :Absolute ; Right : 0 ; Background : #000000 ;} . Left { Position : Absolute ; Left : 0 ; Background : #009933 ;} . Main {Margin-Right : 200px ; Background : # F60 ; Height : 300px ; Margin-left : 200px ;}

 

 <  Div  Class  = "Boxmain"  >          < Div  Class  = "Main"  > Main </  Div  >          </  Div  >      <  Div  Class  = "Left"  > Left </  Div >      <  Div  Class  = "Right"  > Right </  Div  >