CSS to achieve the fixed width of the sidebar, the content bar adaptive

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

We take the right-wide left-hand 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}

Among them, sidebar let him float, and set a width, while the content did not set the width.

It is important to note that you must use DIV tags in html, and do not attempt to use any P tags to achieve your goal. Because the DIV has a default property, that is, if the width is not set, then he will automatically fill the width of his parent tag. The content here is an example.

Of course we can't let him fill up, he can't keep the same line with sidebar. We set him a margin. Since sidebar is on the right side, we set the content Margin-right value, which is a little larger than the width of sidebar-to differentiate their range. In the example is 310.

Assuming that the default width of the content is 100%, then he sets the margin and his width becomes 100%-310, when content finds its width can be squeezed in the same line as the sidebar, so he comes up.

And the width of 100% is relative to his parent tag, if we change the width of his parent tag, then the width of the content will change-for example, we reduce the browser window, the width of wrap will be smaller, and the content of the width will be smaller-but, his actual width of 100%- 310 will always be the same.

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 content and sidebar who are longer, will not affect the layout.

But actually this method has a very old fire limit--html in 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.

Perhaps some people do not understand, say why do you have to sidebar in the back? This is a long story, but the problem is that--content must be before sidebar, but the content width should be self-adapting.

There are two ways to do this, but let's change the HTML structure to the way we want it:

<div  id=   <div   id= "content"  style = "height:340px;" > Adaptive zone, in front </div ;
   <div  id= "sidebar"  style= "height:240px;" > Fixed width zone </div ;
<< Span class= "sy0" >/div ;

2, Fixed width zone using absolute positioning, adaptive zone as usual set margin

We throw the sidebar away, we just set the margin for the content, and then we find that the content width has become adaptive-so the content says to sidebar, my width is irrelevant to you.

Content is easy to take care of, at this time to see sidebar, he was forced to abandon the float. Let's take a look at the features of sidebar: On the right, width 300, his positioning does not affect the content-it is clear that an absolute molecule was born.

So our CSS is as follows:

#wrap{
*zoom:1;Position:Relative;
}
#sidebar {
width: 300px; position: absolute; right: 0; top: 0;
}
#content {
margin-right: 310px;
}< /c8>

This CSS should pay attention to the relative positioning of wrap, so as not to sidebar too absolutely run to the top right corner of the entire page rather than wrap in the upper right corner.

Like it's done? I was relieved to see footer's performance. We're going to add sidebar--Growth 100px! Not a year, just a pair of underwear! Oh,,, just one sentence of code.

But 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.

3,float and the margin of the battle

After the previous lesson, we re-established the conditions that must be achieved for this adaptive width layout:

1. Sidebar width fixed, content width adaptive
2. Content to be before sidebar
3. The elements behind should be properly positioned, not affected.

Because absolute positioning allows other elements to ignore his presence, the absolute positioning must be abandoned.

If the content and sidebar are the same, with float, then the content of the adaptive width will be out of the way, if you do not add float to the content, then the sidebar will run to the next line.

So, finally I decided: float and margin are used.

I'm going to set the width of the content to 100%, then the Float:left, and finally move him 310 to the left so that sidebar can squeeze up.

But then the contents of content will be shifted to the left 310, resulting in the cover, so we have to re-squeeze him out. In order to squeeze, I used an extra div to wrap the content, so the HTML structure became this way:

<DivId="Wrap" >
<DivId="Content"style= "height:140px;"
    <div  id = "CONTENTB";
      content Adaptive zone, in front
     </div ;
  /div ;
  < div  id= "sidebar"  < Span class= "KW3" >style= "height:240px;" >sidebar Fixed width area </div ;
</div ;

The CSS becomes this:

#sidebar{
Width:300px; float: right   }
   #content  {
    margin-left: -310px ; float: left ; width: 100%   }
   #contentb  {
    margin-left: 310px   }

Such a change, the real "content" becomes contentb, his width is the same as the previous content, is 100%-310.

You may notice that the code of the two Margin-left, a -310px a 310px, the last combination of the equivalent of nothing to do, the egg hurts. But he did solve the problem of the order of content and sidebar.

The downside to this approach is that it's too weird and an extra layer of div.

4, Standard browser method

Of course, the standard way of making this adaptive width has long been provided by the standards of non-frustrating people. 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.

——————— Cut the tail ————————-

If IE7 and the following versions are not considered, the standard method is used and the first method is used if the order of the sidebar and content is not used; otherwise, the 3rd method.

The above code is not tested in IE6, there is a problem is not responsible for interpretation. Personally, the way to let IE6 die is--never talk to him again.

Reprint: http://jo2.org/css-auto-adapt-width/

CSS to achieve the fixed width of the sidebar, the content bar adaptive