CSS2 ways to implement two-column three-column layouts

Preface

For flex flexible layouts I believe everyone knows that it is a property in CSS3, but it has some compatibility issues. The landlord a few days before the interview met the interviewer need to design a two-column layout, I certainly said that the parent element Flex bar, but need to use the basic CSS2 in the layout of the attributes, silly dropped ...

Requirements: Two-column layout, left-width, right-adaptive

The HTML layout is as follows

<p id= "Father" >    <p id= "left" > I am the fixed width </p>    <p id= "right" > I am Self-adapting to R </p></p>

1. Flex Layout

#father {            display:flex;        }        #left {            background:red;            height:200px;            width:200px;        }        #right {            background:green;            height:200px;            flex:1;        }

2. CSS2 General Layout

<style>        #left {            background:red;            height:200px;            width:200px;            Float:left;        }        #right {            background:green;            height:200px;            margin-left:200px;        }    </style>

　Attention:

Multi-column layouts require the HTML code of the floating element to be written before the adaptive element. The following is the code for the three-column layout:

<! DOCTYPE html>
Effect