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: &NBSP;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