Adaptive process on the left side of CSS fixed width (compatible with all browsers)

Adaptive process on the left side of CSS fixed width (compatible with all browsers)

CSS style

 

body,ul,li {  margin:0;  padding:0;}ul,li {  list-style:none;}.form-table {  width: 600px;  height: 330px;  margin:10px auto;  overflow: hidden;  padding: 0;}.form-table .list {  width: 100%;  height: auto;  overflow: hidden;}.form-table .list .item {  width: 100%;  height: auto;  margin-top: 10px;  font-size: 12px;  line-height: 40px;  overflow: hidden;}.form-table .list .item .name {  float: left;  width: 67px;}.form-table .list .item .info {  width: 100%;  height: auto;  margin-left: 67px;}.form-table .list .item .textarea {  position: relative;  width: auto;}.form-table .list .item .input {  width: 360px;  height: 40px;  line-height: 40px;  text-indent: 10px;  border: 1px solid #e5e5e5;  border-radius: 3px;}.form-table .list .item textarea {  width: 100%;  height: 100px;  border: 1px solid #e5e5e5;  border-radius: 3px;  box-sizing: border-box;}

HTML code

 

 

Enter the form

• Application name: alimail
• Personal Signature: 
• Personal description: 

 

The div. name on the Left needs to be floating, and the div.info on the right does not set floating (width is not defined as pixel or percentage, either not defined or auto ,),
Set the value of margin-left to be the same as the width value of div. name on the left;
Box-sizing: border-box; this indicates that the element size includes a border. ie8 + is supported;

If the width of the div. form-table is changed, the div.info element on the right and the size of the child element are also changed; adaptive;

 

: