Implement a three-column layout (left-right fixed, middle-adaptive width)

HTML code (12th method):

<Divclass= "Left">Left fixed area</Div><Divclass= "Right">Right fixed area</Div><Divclass= "Mid">Intermediate Adaptive Zone</Div>

CSS code:

First method (positioning):

. Left{position:Absolute;Top:0; Left:0;width:100px;Height:200px;Background-color:Red; }. Mid{Margin-left:100px;Margin-right:200px;Height:200px;Background-color:Blue; }. Right{position:Absolute;Top:0; Right:0;width:200px;Height:200px;Background-color:Yellow; }

The second method (floating):

. Left{float: Left;width:100px;Height:200px;Background-color:Red;}. Mid{Height:200px;Background-color:Blue;}. Right{float: Right;width:200px;Height:200px;Background-color:Yellow;}

The third method (negative margin):

HTML code:

<Divclass= "center FL">  <Divclass= "Mid"> Middle Adaptive Region Adaptive Zone Intermediate Adaptive Zone Intermediate Adaptive Region Middle Adaptive Zone Intermediate Adaptive Zone Intermediate Adaptive Zone Mid Adaptive Zone Center self-adaptive area in intermediate self-adaptive region</Div></Div><Divclass= "Left fl">Left fixed area</Div><Divclass= "Right fl">Right fixed area</Div>

CSS code:

. FL{float: Left; }. Center{width:100%;Height:200px;background:Yellow;}. Center. Mid{Margin-right:100px;padding:0 110px; }. Left{Margin-left:-100%;width:100px;Height:200px;background:Green;}. Right{Margin-left:-200px;width:200px;Height:200px;background:Blue;}

Implement a three-column layout (left-right fixed, middle-adaptive width)