Adaptive width of left and right columns, fixed width of middle columns, and adaptive width of left and right columns

Source: Internet
Author: User

Adaptive width of left and right columns, fixed width of middle columns, and adaptive width of left and right columns

The width of the left and right columns is adaptive, and the width of the middle column is fixed:
The width of the middle column is fixed, and the adaptive effect of the width of the left and right columns is applied in many web pages. The following describes how to achieve this effect:
The code example is as follows:

<! DOCTYPE html> 

The above code implements the effect. You can adjust the window size for testing. The following describes how to achieve this effect:

I. Implementation principle:

1. Set the outer margin of the left and right columns to-150px, so that the middle column can be set between the left and right columns, with a width of PX.

2. Set the left margin of the Child div in the left and right columns to 150px, so that the content of the left and right columns can be displayed in the "-150px margin area" of non-parent elements.

Based on the above principle, the center is fixed and the width of the left and right columns is adaptive.

Ii. Knowledge POint Description:

1. according to the implementation principle, the value of the left and right margin should be-150px, but the actual value is indeed-151px. This is because IE6 and IE7 are not ideal for processing the percentage of width, therefore, we need to increase the Margin Size by one pixel. Otherwise, a line break may occur.

Original address: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/509.html

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.