Home > Developer > CSS

Examples of css implementation of two-column width adaptive

Source: Internet
Author: User
Tags min wrapper
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Starting with the fixed width of the two columns, when trying the layout of the two columns, the width of the left and right columns can be adaptive. We know from the adaptive layout of the column, the adaptive setting is mainly based on the percentage value of the width. Therefore, in the adaptive layout of the two columns, the percentage width value is also designed. Continue with the above CSS code, we need to define the width of the two columns:

The code is as follows: Copy code

# Left {
Background-color: # E8F5FE;
Border: 1px solid # A9C9E2;
Float: left;
Height: 300px;
Width: 20%;
}
# Right {
Background-color: # F2FDDB;
Border: 1px solid # A5CF3D;
Float: left;
Height: 300px;
Width: 70%;
}

The width of the left column is set to 20%, and the width of the right column is set to 70%. It looks like a common webpage with navigation on the left and content on the right.

The code is as follows: Copy code

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> adaptive width of two columns --111cn.net </title>
<Style type = "text/css">
<! --
# Left {
Background-color: # E8F5FE;
Border: 1px solid # A9C9E2;
Float: left;
Height: 300px;
Width: 20%;
}
# Right {
Background-color: # F2FDDB;
Border: 1px solid # A5CF3D;
Float: left;
Height: 300px;
Width: 70%;
}
-->
</Style>
</Head>
 
<Body>
<Div id = "left"> left column -- (111cn.net) </div>
<Div id = "right"> right column -- Adaptive width of two columns (111cn.net) </div>
</Body>
</Html>

Why didn't I set the right column to 80% to achieve the overall 100% effect?
The cause of this problem must begin with other attributes of the object. We should remember that in order to make the layout clearer in the preview, we use the border attribute, so that both objects have a 1 px border. In CSS layout, the width of an object is not only determined by the width value, the actual width of an object is composed of the width of the object, the left and right margins of the object, the left and right borders, and the inner margins, therefore, the object on the left is not only the 20% width of the browser window, but also the border width on the left. In this case, both the left and right columns exceed the percentage width, and the final width exceeds the width of the browser window. Therefore, the right column is displayed in the second row, this results in the loss of the left and right columns. Therefore, we use the sum of not 100% widths. In actual application, we can avoid using borders and margins, and achieve the effect of filling the left and right with the browser. This issue about width calculation is a very important issue in CSS layout known as the box model. It will be explained in detail in future tutorials.


Two columns float on the left and adaptive width on the right


The left column is used for float, and the right column is not float. The margin-left is used for positioning. This method has an ie6 3px bug. In addition, when the browser box is reduced to a certain extent, the right side will fall down.

The code is as follows: Copy code

<! DOCTYPE html>
<Html>
<Head>
<Title> method 1 </title>
<Style type = "text/css">
# Left
{Width: 100px; height: 100px; background-color: # ccc; border: 2px solid #333; float: left ;}
# Right
{Height: 300px; margin-left: Pixel px; border: 2px solid #333; background: # ccc url (img/baidu_logo.gif) no-repeat;
}
</Style>
</Head>
<Body>
<Div id = "left"> left </div>
<Div id = "right"> 1111 <br/> 1111 <br/> 1111 <br/> 1111 <br/> 1111 <br/> 1111 <br/> 111 <br/> 11 </div>
</Body>
</Html>

Let's take a look at the specific requirements of this interview question:

1. Fixed width on the left side and adaptive screen width on the right side;
2. Two left and right columns with a high layout;
3. The left and right columns must have a minimum height, for example, 200px. (when the content exceeds 200, it will automatically increase in height)
4. JavaScript or CSS behavior is not required;
It is not difficult to analyze the requirements of the questions carefully, but it is just like a problem. But after you read it carefully, you will think that is not the case:

1. Fixed on the left and adaptive layout on the right. The first point should be very easy and there are many implementation methods. Then we can say that the first requirement is no longer a requirement;
2. The layout of the left and right columns is relatively complicated, but it is not difficult to understand how to implement the layout. I personally think the key to this question is here to test how you can achieve a high level of layout; so you need to understand how to implement it;
3. As for the third requirement, it should be very important. We can see code that achieves the minimum height everywhere;
4. The fourth requirement I think is that the examiner wants us to interview people who cannot use js to implement features with high layout and minimum height.
The above simple analysis of the implementation process, the final key should be "let your code achieve two points at the same time, one is fixed on the left, the right adaptive layout; the second is to implement a layout with two columns. "If these two functions are completed, you can submit the job. Then let's take a look at these two points as a combination implementation:

Layout of one or two columns: fixed width on the left and adaptive width on the right
This layout is not difficult. I think many of you have implemented it, so I will introduce two common methods here:

Method 1: floating layout

In this way, I use floating on the left side, and a margin-left value on the right side, so that the left side is fixed and the right side is adaptive.

HTML Markup

  

The code is as follows: Copy code

<Div id = "left"> Left sidebar </div>
<Div id = "content"> Main Content </div>
CSS Code

<Style type = "text/css">
*{
Margin: 0;
Padding: 0;
   }

# Left {
Float: left;
Width: 220px;
Background-color: green;
   }

# Content {
Background-color: orange;
Margin-left: 220px;/* = equal to the width of the left sidebar = */
   }
</Style>

The key to the above implementation method is that the "margin-left" value of "div # content" in the adaptive width column must be equal to the width value of the fixed width column, you can click to view the DEMO of the above code

Method 2: floating and negative margins

This method uses floating and negative margins to achieve the layout of the adaptive width on the right side of the left fixed width. You can carefully compare the above implementation methods to see the differences between the two:

HTML Markup

The code is as follows: Copy code

<Div id = "left">
Left Sidebar
</Div>
<Div id = "content">
<Div id = "contentInner">
Main Content
</Div>
</Div>
CSS Code

*{
Margin: 0;
Padding: 0;
  }
# Left {
Background-color: green;
Float: left;
Width: 220px;
Margin-right:-100%;
  }
  
# Content {
Float: left;
Width: 100%;
  }
  
# ContentInner {
Margin-left: 220px;/* = equal to the width of the left sidebar = */
Background-color: orange;
  }

This method seems a little more troublesome, but it is also a very common method. You can look at its DEMO effect. Let's take a look at what is different from the previous DEMO.

I will only show the two methods here. You must have other implementation methods. I will not talk about them because we are not talking about this issue today. After completing the first effect of the question, you need to find a way to achieve the second requirement-two columns and high layout. This is also a crucial point for this interview. If you do not know how to implement a high-profile layout, I suggest you read the eight types of high-profile layout on this site first. this section describes in detail the eight high-level layout methods with relevant code. We also use these methods later.

Now that the key two points are completed, we need to implement the third requirement to set the minimum height. This method is simple:

The code is as follows: Copy code
Min-height: 200px;
Height: auto! Important;
Height: 200px;

The above code helps us easily set the minimum cross-browser height. In this way, we can hand in our homework and finish the examination of this interview question. To help you better understand the image, I have prepared five different implementation methods:

Method 1:

Let's not talk about anything more. You can directly use the code or refer to the online DEMO. All the demos below have HTML and CSS code. If you are interested, take a look.

The code is as follows: Copy code

HTML Markup

<Div id = "container">
<Div id = "wrapper">
<Div id = "sidebar"> Left Sidebar </div>
<Div id = "main"> Main Content </div>
</Div>
</Div>
CSS Code

<Style type = "text/css">
*{
Margin: 0;
Padding: 0;
   }
Html {
Height: auto;
   }

Body {
Margin: 0;
Padding: 0;

   }

# Container {
Background: # ffe3a6;
   }

# Wrapper {
Display: inline-block;
Border-left: 200px solid # d4c376;/* = This value is equal to the width of the left sidebar = */
Position: relative;
Vertical-align: bottom;
   }

# Sidebar {
Float: left;
Width: 200px;
Margin-left:-200px;/* = This value is equal to the width of the left sidebar = */
Position: relative;
   }

# Main {
Float: left;
   } 

# Maing,
# Sidebar {
Min-height: 200px;
Height: auto! Important;
Height: 200px;
   }
</Style>
.

Method 2

HTML Markup

<Div id = "container">
<Div id = "left" class = "aside"> Left Sidebar </div>
<Div id = "content" class = "section"> Main Content </div>
</Div>
CSS Code

<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
# Container {
Overflow: hidden;
     }

# Left {
Background: # ccc;
Float: left;
Width: 200px;
Margin-bottom:-99999px;
Padding-bottom: 99999px;

     }

# Content {
Background: # eee;
Margin-left: 200px;/* = This value is equal to the width of the left sidebar = */
Margin-bottom:-99999px;
Padding-bottom: 99999px;
     }
# Left,
# Content {
Min-height: 200px;
Height: auto! Important;
Height: 200px;
     }
</Style>
View the online DEMO.

Method 3:

HTML Markup

<Div id = "container">
<Div id = "content"> Main Content </div>
<Div id = "sidebar"> Left Sidebar </div>
</Div>
CSS Code

* {Margin: 0; padding: 0 ;}
# Container {
Background-color: # 0ff;
Overflow: hidden;
Padding-left: 220px;/* width and width of the sidebar */
    }
* Html # container {
Height: 1%;/* So IE plays nice */
    }
# Content {
Background-color: # 0ff;
Width: 100%;
Border-left: 220px solid # f00;/* width and width of the sidebar */
Margin-left:-220px;/* width and width of the sidebar */
Float: right;
    }
# Sidebar {
Background-color: # f00;
Width: 220px;
Float: right;
Margin-left:-220px;/* width and width of the sidebar */
    }
# Content,
# Sidebar {
Min-height: 200px;
Height: auto! Important;
Height: 200px;
    }
Effect.

Method 4:

HTML Markup

<Div id = "container2">
<Div id = "container1">
<Div id = "col1"> Left Sidebar </div>
<Div id = "col2"> Main Content </div>
</Div>
</Div>
CSS Code

* {Padding: 0; margin: 0 ;}
# Container2 {
Float: left;
Width: 100%;
Background: orange;
Position: relative;
Overflow: hidden;
    }
# Container1 {
Float: left;
Width: 100%;
Background: green;
Position: relative;
Left: 220px;/* width and sidebar width */
    }
    
# Col2 {
Position: relative;
Margin-right: 220px;/* width and width of the sidebar */
    }
    
# Col1 {
Width: 220px;
Float: left;
Position: relative;
Margin-left:-220px;/* width and width of the sidebar */
    }
   
# Col1, # col2 {
Min-height: 200px;
Height: auto! Important;
Height: 200px;
   }
.

Method 5:

HTML Markup

<Div id = "container1">
<Div id = "container">
<Div id = "left"> Left Sidebar </div>
<Div id = "content">
<Div id = "contentInner"> Main Content </div>
</Div>
</Div>
</Div>
CSS Code

* {Padding: 0; margin: 0 ;}
# Container1 {
Float: left;
Width: 100%;
Overflow: hidden;
Position: relative;
Background-color: # dbddbb;
  }
# Container {
Background-color: orange;
Width: 100%;
Float: left;
Position: relative;
Left: 220px;/* width and sidebar width */
  }
# Left {
Float: left;
Margin-right:-100%;
Margin-left:-220px;/* width and width of the sidebar */
Width: 220px;
  }
# Content {
Float: left;
Width: 100%;
Margin-left:-220px;/* width and width of the sidebar */
  }
# ContentInner {
Margin-left: 220px;/* width and width of the sidebar */
Overflow: hidden;
  }
  
# Left,
# Content {
Min-height: 200px;
Height: auto! Important;
Height: 200px;
  }
.

In response to the requirements of the above interview questions, I have used a total of five different methods to achieve the implementation, after testing can run in various browsers, and finally I have a few points to put forward:

1. In all the demos above, you should pay attention to the al cooperation and the value should be uniform. If you want to try to use the width value required by your layout, please modify it according to the relevant code links;
2. in all the demos above, the spacing between them is not set. If you want to have a certain gap between them, there are two possible ways to implement it. One is to modify the relevant parameters based on the DEMO above, second, add the "div" label in the corresponding content and set its "padding" value, which is safer and will not break your layout.
3. because the adaptive width is used in one column here, in some browsers, when the browser screen is pulled to a certain size, we feel that the content in the auto-adaptive width column is hidden. In your actual project, we can add a "min-width" setting in "body.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
implementation of ajax in php css first of class zen of css design stacked column chart with two sets of data set height and width of image actual width of 32 inch tv height and width of image in html
Related Article
Web page production of CSS Super Skill big Broadcast collection
Selenium using Xpath+css+javascript+jquery positioning method...
Create animations using @keyframes in CSS3, examples
Detailed four property value usages common in CSS Display pro...
How to use Border-radius in CSS3? Examples of Border-radius d...
In-depth analysis of css float attributes in webpage settings

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More