CSS implements left width adaptive, right width fixed

<DivID= "wrap">  <DivID= "sidebar"style= "height:240px;">Fixed width area</Div>  <DivID= "content"style= "height:340px;">Adaptive Zone</Div></Div><DivID= "footer">A div in the back to ensure that the front positioning does not cause subsequent deformations</Div>

Method 1

Fixed width area floating, Adaptive zone without width and set margin

#wrap{Overflow:Hidden;*zoom:1; }#content, #sidebar{Background-color:#eee; }#sidebar{float: right;width:300px; }#content{Margin-right:310px; }#footer{Background-color:#f00;Color:#fff;Margin-top:1em}

This method looks perfect, as long as we remember to clear the float (here I use the simplest method), the footer will not Dislocation. And regardless of the content and sidebar who is longer, it will not affect the layout. but in fact this method has a very old fire limit--html sidebar must be before content!

Method 2:

Fixed width area with absolute positioning, Adaptive zone as usual set margin

<DivID= "wrap">  <DivID= "content"style= "height:340px;">Adaptive zone, in front</Div>  <DivID= "sidebar"style= "height:240px;">Fixed width area</Div></Div>

{    *zoom: 1; position: relative;  }        {width: 300px; position: absolute; right:    0; top: 0;  } {margin-right: 310px;    }     

Why is footer still there? Why didn't you go down automatically? Footer Said--i do not give way to the absolute doctrine!

It's not about footer, it's about Wrap's disregard for sidebar--you're longer, I still don't feel it.

It seems that this way of positioning can only satisfy sidebar himself, but to his brothers but no benefit.

Method 3:

float and margin battle

<DivID= "wrap">  <DivID= "content"style= "height:140px;">    <DivID= "contentb">content Adaptive zone, in front</Div>  </Div>  <DivID= "sidebar"style= "height:240px;">Sidebar Fixed width zone</Div></Div>

{    width: 300px; float: right;  }       {margin-left: -310px; float: left; width     : 100%;  } {margin-left: 310px;    }     

One More Div.

Method 4:

Methods for standard Browsers

Set Wrap to Display:table and specify width 100%, then set Content+sidebar to display:table-cell, and then assign only one width to sidebar, then the width of the content becomes Adaptive. The code is small and there are no extra tags. But this is the method that IE7 is Invalid.

CSS implements left width adaptive, right width fixed