CSS implementation right fixed width, left width adaptive

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.