CSS implementation right fixed width, left width adaptive

In turn, the left-hand width is fixed and the right-hand adaptive. Whether it's left or right, the width is fixed on one side, and the width is self-adapting.

To achieve this layout, it is relatively simple. Let's first give the HTML structure:

<div id= "wrap" > <div id= "sidebar" style= "height:240px;" > Fixed width area </div> <div id= "content" style= "height:340px;" > Adaptive Zone </div></div><div id= "Footer" > a trailing div to ensure that the previous positioning does not cause subsequent transformations </div>

A few common methods are listed below:

1, fixed width zone floating, adaptive zone without width and set margin

We take the right-hand width to the left adaptive to do the demonstration, the CSS code is as follows:

 #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} 

which, sidebar let him float, and set a width, and the content does not set the width.

> This method looks perfect as long as we remember clear float (here I use the simplest method), the footer is not misplaced. And regardless of the content and sidebar who is longer, the layout will not be affected.

But actually this method has a very old fire limit--html sidebar must be before content !

but I need sidebar after the content! Because my content is the main contents of the page, I do not want the main content instead of the secondary content behind.

But if sidebar is in the content, everything on it will go to naught.

2, Standard browser method

> Of course, the standard way to create this adaptive width has long been provided by the no-toss-people standard. That's easy: Set Wrap to Display:table and specify width 100%, then set Content+sidebar to Display:table-cell, and then specify only one width for sidebar. Then the width of the content becomes self-adapting.

The code is small and there are no extra tags. But this is the method that IE7 is invalid.

CSS implementation right fixed width, left width adaptive