CSS implementation right Fixed width left width adaptive

This paper mainly introduces the CSS implementation of the right fixed width of the left-hand width adaptive, this layout is more common, blog Park a lot of the default theme is this. In general, the width-fixed area of this layout is the sidebar, and the adaptive area is the body content area, which in turn can be: fixed on the left and adaptive to the right. Whether it's left or right, the width is fixed on one side, and the width is self-adapting.

This layout is more common, the blog park many of the default theme is this. In general, this layout is a fixed width of the area is the sidebar, and the adaptive area is the main content area-I believe that the side bar into adaptive people are very few?

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

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

The #wrap p in the code is used to wrap the two areas we want to locate, and there is a #footer behind him to test if the previous positioning is done and will not cause the P dislocation in the back-if misplaced, it proves that our positioning method must be improved.

A few common methods are listed below:

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.

Be aware that the HTML must use the P tag, do not attempt to use what P tag to achieve the purpose. Because P 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.

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

<p id= "wrap" >  <p id= "content" style= "height:340px;" > Adaptive zone, in front </p>  <p id= "sidebar" style= "height:240px;" > Fixed Width zone </p></p>

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

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:

• Sidebar width fixed, content width adaptive

• Content to be before sidebar

• 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 p to wrap the content, so the HTML structure became this way:

<p id= "wrap" >  <p id= "content" style= "height:140px;" >    <p id= "CONTENTB" >      content Adaptive Zone, in front    </p>  </p>  <p id= "sidebar" style= " height:240px; " >sidebar Fixed Width zone </p></p>

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

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.